15_DOM获取子节点.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <ul class="ul1">
  10. <li>1</li>
  11. <li>2</li>
  12. <li>3</li>
  13. <li>4</li>
  14. </ul>
  15. <ul class="ul2">
  16. <li>a</li>
  17. <li>b</li>
  18. </ul>
  19. <div class="box">
  20. <span>hello</span>
  21. world
  22. <p>你好</p>
  23. </div>
  24. <script>
  25. var aUl1 = document.getElementsByClassName("ul1")[0];
  26. var oBox = document.getElementsByClassName("box")[0];
  27. // var aLi1 = aUl1.getElementsByTagName("li");
  28. // console.log(aLi1)
  29. // childNodes 可以获取当前元素的子节点 节点包含字符比如回车
  30. console.log(aUl1.childNodes);
  31. console.log(oBox.childNodes);
  32. // children 获取当前元素的子节点但仅包含元素节点不包含文本节点
  33. console.log(aUl1.children);
  34. console.log(aUl1.children[2]);
  35. </script>
  36. </body>
  37. </html>