获取html标签的方式_获取html标签的方法

作者：你好赵伟 | 2024-02-18 21:17:33

踩

获取html标签的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取html标签的方式</title>
    <style type="text/css">
      #color>li:first-child {
        background-color:red;
      }
      #color>li:nth-child(4) {
         background-color: yellow;
      }
    </style>
   <script type="text/javascript">


       window.onload =function(){
           /*
           *
           * getElementById
             *    通过id去获取元素，它只有一个主语，document（整个文档）
           *
           * getElementsByTagName
           *        通过标签名称去获取一组元素，它获取到的是一组元素
           *            主语（限制范围）：
           *            document:从整个文档中去获取元素
           *            父级元素：从父级元素去获取下一级的元素
           *
           */
           var color1 = document.getElementById("color");

           var lis1 = document.getElementsByTagName("li");
           var lis2 =color1.getElementsByTagName("li");
           console.dir(lis1);
           console.dir(lis2);

           /* ----------------------------------------------------------
           * getElementsByClassName
           *        通过类名称去获取一组元素
           *            主语（限制范围）：
           *            document:从整个文档中去获取class元素
           *            父级元素：从父级元素去获取class元素
           */
           var blacks1 = document.getElementsByClassName("black");

           var color2 = document.getElementById("color");
           var blacks2 = color2.getElementsByClassName("black");
           console.dir(blacks1);
           console.dir(blacks2);


           /*----------------------------------------------------------
           * querySelector(css选择器)
           *        通过css选择器去获取一个元素，如果说有重复的那么它只取第一个
           *            主语（限制范围）：
           *            document:从整个文档中去获取一个元素
           *            父级元素：从父级元素去获取一个元素
           */
           var red = document.querySelector("#color>li:first-child");
           red.style.background = "red";
           var ul = document.querySelector(".color2");
           ul.style.background = "green";


           /*----------------------------------------------------------
           * querySelectorAll(css选择器或标签)
           *        通过css选择器或标签去获取一组元素
           *            主语（限制范围）：
           *            document:从整个文档中去获取一组元素
           *            父级元素：从父级元素去获取一组元素
           */
           var lis = document.querySelectorAll("li");
           console.dir(lis);

           var color = document.getElementById("color");
           var lis1 = color.querySelectorAll("li");
           var lis2 = document.querySelectorAll("#color li");
           console.dir(lis1);
           console.dir(lis2);

           /*
           * 为一组元素赋值时，需要使用循环，而不能用lis1.style.backgroundColor = "yellow";
           */
           for(var i=0;i<lis2.length;i++){

               lis2[i].style.backgroundColor = "yellowgreen";
           }
       };

   </script>
</head>
<body>

   <ul id="color">
        <li>red</li>
        <li class="black">black</li>
        <li >green</li>
        <li>pink</li>
        <li>purple</li>
        <li>yellow</li>
   </ul>
   <ul class="color2">
        <li>red</li>
        <li class="black">black</li>
        <li>green</li>
        <li>pink</li>
        <li>purple</li>
        <li>yellow</li>
   </ul>
</body>
</html>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】