DOM对象，控制HTML对象

最新推荐文章于 2022-08-21 18:06:49 发布

原创最新推荐文章于 2022-08-21 18:06:49 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript进阶篇专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了DOM操作中的核心方法，包括获取元素、修改属性、插入及删除节点等，并提供了实际应用案例。

1.getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：document.getElementsByName(name)

注意：（1）因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

2.getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法：document.getElementByTagName(Tagname)

说明:（1）Tagname是标签的名称，如p、a、img等标签吗

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

3.程序

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>无标题文档</title>
    </head>
    
    <body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
        function checkall(){
            var hobby = document.getElementsByTagName("input");
            for(var i=0;i<hobby.length;i++)
            {
                hobby[i].checked=true;
            }
          // 任务1 
           
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++)
            {
                hobby[i].checked=false;
            }
         // 任务2    
            
        }
        
        function checkone(){
            clearall();
            var hobby = document.getElementsByName("hobby");
            var j=document.getElementById("wb").value;
            for(var i=0;i<j.length;i++){
                if(j.charAt(i)>6 || j.charAt(i)<1){
                    alert("越界,请重新输入！");
                    document.getElementById("wb").value="";
                }
            }
                for(var n=0;n<j.length;n++){
                   
                        hobby[(j.charAt(n))-1].checked=true; 
                }

            
            
        }
        
        </script>
    </body>
</html>

4.getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

说明：（1）elementNode：使用getELementById()、getElementByTagName()等方法，获取到的元素节点。

（2）name:要想查询的元素节点的属性名字。

5.setAttribute()方法

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value);

说明：name:要设置的属性名 value：要设置的属性值

6.节点属性

在文档对象属性（DOM）中，每个节点都是一个对象，DOM节点有三个重要属性：nodeName：节点名称 nodeValue：节点的值 nodeType：节点的类型

（1）nodeName属性：节点的名称，是只读的。