直接查找标签

  1. document.getElementsByTagName("标签名")
  2. document.getElementById("id值")
  3. document.getElementsByClassName("类名")

1、方法的返回值是dom对象还是数组 2、document对象可以是任意dom对象，将查询范围限制在当前dom对象

导航查找标签

  1. elementNode.parentElement           // 父节点标签元素
  2. elementNode.children                // 所有子标签
  3. elementNode.firstElementChild       // 第一个子标签元素
  4. elementNode.lastElementChild        // 最后一个子标签元素
  5. elementNode.nextElementSibling     // 下一个兄弟标签元素
  6. elementNode.previousElementSibling  // 上一个兄弟标签元素

CSS选择器查找

  1. document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
  2. document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  10. <div id="i1">DIV1</div>
  12. <div class="c1">DIV</div>
  13. <div class="c1">DIV</div>
  14. <div class="c1">DIV</div>
  17. <div class="outer">
  18.     <div class="c1">item</div>
  19. </div>
  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>
  32. <script>
  34.    // 直接查找
  35.    var ele = document.getElementById("i1");  // ele就是一个dom对象
  36.    console.log(ele);
  38.    var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
  39.    console.log(eles);
  41.    var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
  42.    console.log(eles2);
  44.    var outer = document.getElementsByClassName("outer")[0];
  45.    var eles3 = outer.getElementsByClassName("c1");
  46.    console.log(eles3);
  48.    // 导航查找
  49.     var c5 = document.getElementsByClassName("c5")[0];
  50.     console.log(c5);  // c5是一个DOM对象
  52.     console.log(c5.parentElement.lastElementChild);  // 返回值是dom对象
  53.     console.log(c5.parentElement.children);  // 返回值是dom对象数组
  54.     console.log(c5.nextElementSibling);
  55.          console.log(c5.nextElementSibling.nextElementSibling);
  57.     // css选择器
  58.     var dom = document.querySelector(".c2 .c3 .c5");
  59.     console.log(":",dom);
  61.     var doms = document.querySelectorAll("ul li");
  62.     console.log("",doms);
  64. </script>
  66. </body>
  67. </html>