获取html标签的方式

最新推荐文章于 2024-06-23 14:49:10 发布

一地鸡毛_0101

最新推荐文章于 2024-06-23 14:49:10 发布

阅读量3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37555897/article/details/72599176

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>