getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明

最新推荐文章于 2024-08-25 09:57:22 发布

jhan；

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量1.3w

点赞数 3

分类专栏： JavaWeb-JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46065214/article/details/126378300

版权

JavaWeb-JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

getElementsByName方法

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法</title>
    <script type="text/javascript">
        //全选
        function checkall(){
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //该集合操作跟数组一样，集合中元素顺序是它们在html页面中从上到下的顺序
            //集合中每个元素都是dom对象，
            var hobbys = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是 true ，不选中是 false
            //checked 这个属性 可读，可写
            for (var i = 0; i< hobbys.length; i++) {
                    hobbys[i].checked = true;
            }
        }

        //全不选
        function checkno(){
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //该集合操作跟数组一样，集合中元素顺序是它们在html页面中从上到下的顺序
            //集合中每个元素都是dom对象，
            var hobbys = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是 true ，不选中是 false
            //checked 这个属性 可读，可写
            for (var i = 0; i< hobbys.length; i++) {
                hobbys[i].checked = false;
            }
        }

        //反选
        function checkReverse(){
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //该集合操作跟数组一样，集合中元素顺序是它们在html页面中从上到下的顺序
            //集合中每个元素都是dom对象，
            var hobbys = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是 true ，不选中是 false
            //checked 这个属性 可读，可写
            for (var i = 0; i< hobbys.length; i++) {
               /* if (hobbys[i].checked){
                    hobbys[i].checked = false;
                }else {
                    hobbys[i].checked = true;
                }*/

                hobbys[i].checked = !hobbys[i].checked;
            }
        }

    </script>

</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="c"/>C
    <input type="checkbox" name="hobby" value="java"/>java
    <input type="checkbox" name="hobby" value="python"/>python
    <br/>
    <button οnclick="checkall();">全选</button>
    <button οnclick="checkno();">全不选</button>
    <button οnclick="checkReverse();">反选</button>
</body>
</html>

getElementsByTagName方法

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
    <script type="text/javascript">

        function checkall() {
            //document.getElementsByTagName();按照指定标签名进行查询并返回集合
            //该集合的操作跟数组一样，集合中都是dom对象，
            //集合中元素顺序是它们在html中从上到下顺序
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }

    </script>


</head>
<body>
        兴趣爱好：
        <input type="checkbox"  value="c"/>C
        <input type="checkbox"  value="java"/>java
        <input type="checkbox"  value="python"/>python
        <br/>
        <button οnclick="checkall();">全选</button>

</body>
</html>

document对象三个查询方法的使用注意事项

注意：document对象的三个查询方法，如果有id属性，优先使用getElementById方法进行查询，如果没有id属性，则优先调用getElementsByName方法来进行查询，如果id属性和name属性都没有，最后按标签名查getElementsByTagName

以上三个方法都要在加载完成之后执行，才能查询到标签对象

dom对象查询练习

节点就是标签对象，节点的常用属性和方法：

方法：

通过具体的元素节点调用:

getElemensByTagName()方法，获取当前节点的指定标签名孩子节点

appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

childNodes属性：获取当前节点的所有子节点

firstChild属性：获取当前节点的第一个子节点

lastChild属性：获取当前节点的最后一个子节点

parentNode属性：获取当前节点的父节点

nextSibling属性：获取当前节点的下一个节点

previousSibling属性：获取当前节点的上一个节点

className属性：用于获取或设置标签的class属性值

innerHTML属性：表示获取/设置起始标签和结束标签中的内容

innerText属性：表示获取/设置起始标签和结束标签中的文本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function (){
         var bj = document.getElementById("bj");
         alert(bj.innerHTML);

      }
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function(){
         var lis = document.getElementsByTagName("li");
         alert(lis.length);

      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function(){
         var gender = document.getElementsByName("gender");
         alert(gender.length);

      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function(){
         //1.获取id为city的节点
         //2.通过city节点.getElementsByTagName按标签名查子节点
         var city = document.getElementById("city");
         var lis = city.getElementsByTagName("li");
         alert(lis.length);

      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
         //1.获取id为city的节点
         var city = document.getElementById("city");
         //2.获取city的所有子节点
         var childNodes = city.childNodes;
         //3.空格也算字符串
         alert(childNodes.length);

      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
         //1.获取id为phone的节点
         var phone = document.getElementById("phone");
         //2.获取phone的第一个子节点
         var firstChild = phone.firstChild;
         alert(firstChild.innerHTML);

      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
         var bj = document.getElementById("bj");
         var parentNode = bj.parentNode;
         alert(parentNode.innerHTML);

      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
         var android = document.getElementById("android");
         var previousSibling = android.previousSibling;
         alert(previousSibling.innerHTML);

      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function(){
         var username = document.getElementById("username");
         var value = username.value;
         alert(value);

      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
         var username = document.getElementById("username");
         username.value = "这是第十个按钮";
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
         var bj = document.getElementById("bj");
         var innerText = bj.innerText;
      };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
      <p>
         你喜欢哪个城市?
      </p>

      <ul id="city">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>东京</li>
         <li>首尔</li>
      </ul>

      <br>
      <br>

      <p>
         你喜欢哪款单机游戏?
      </p>

      <ul id="game">
         <li id="rl">红警</li>
         <li>实况</li>
         <li>极品飞车</li>
         <li>魔兽</li>
      </ul>

      <br />
      <br />

      <p>
         你手机的操作系统是?
      </p>

      <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>

   <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

document对象补充说明

document.createElement(tagName)方法：通过给定的标签名，创建一个标签对象，tagName是要创建的标签名

appendChild(oChildNode)方法：可以添加一个子节点，oChildNode是要添加的孩子节点

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>document对象补充说明</title>
    <script type="text/javascript">

        window.onload = function (){
            //需求：需要使用js代码来创建html标签，并显示在页面上
            //标签内容是:document对象补充说明
            var divobj = document.createElement("div");//在内存中
            divobj.innerHTML = "document对象补充说明";//在内存中
            document.body.appendChild(divobj);
        }

    </script>
</head>
<body>

</body>
</html>

jhan；

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明

getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
复制链接

扫一扫