经验总结

  1. 首页 > 生活 > >

3.JS(12)

生活百科3.JS

  • CSS选择器查找
     document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象） document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
    •  

    3.JS

    文章插图
    3.JS

    文章插图
     1 <!DOCTYPE html> 2  <html lang="en"> 3  <head> 4      <meta charset="UTF-8"> 5      <title>Title</title> 6  </head> 7  <body> 8   9  10  <div id="i1">DIV1</div>11  12  <div class="c1">DIV</div>13  <div class="c1">DIV</div>14  <div class="c1">DIV</div>15  16  17  <div class="outer">18      <div class="c1">item</div>19  </div>20  21  22  <div class="c2">23      <div class="c3">24          <ul class="c4">25              <li class="c5" id="i2">111</li>26              <li>222</li>27              <li>333</li>28          </ul>29      </div>30  </div>31  32  <script>33  34     // 直接查找35  36     var ele = document.getElementById("i1");  // ele就是一个dom对象37     console.log(ele);38  39     var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]40     console.log(eles);41  42     var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]43     console.log(eles2);44  45     var outer = document.getElementsByClassName("outer")[0];46     var te = outer.getElementsByClassName("c1");47     console.log(te);48  49     // 导航查找50  51      var c5 = document.getElementsByClassName("c5")[0];52      console.log(c5);  // c5是一个DOM对象53  54      console.log(c5.parentElement.lastElementChild);  // 返回值是dom对象55      console.log(c5.parentElement.children);  // 返回值是dom对象数组56      console.log(c5.nextElementSibling.nextElementSibling);57      console.log(c5.parentElement.children);58  59      // css选择器60  61      var dom = document.querySelector(".c2 .c3 .c5");62      console.log(":::",dom);63  64      var doms = document.querySelectorAll("ul li");65      console.log(":::",doms);6667  </script>68  69  </body>70  </html>7172

    经验总结扩展阅读


    上一篇：2022年农历腊月乔迁黄道吉日

    下一篇：运动量大的人具体吃什么 运动量大的人多吃什么