2.获取标签.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334
  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. <div id="btn">这是一个按钮</div>
  10. <div class="vase">这是一个花瓶</div>
  11. <ul class="hi">
  12. <li>你好</li>
  13. <li>你好</li>
  14. <li>你好</li>
  15. </ul>
  16. <script>
  17. // 1.获取ID选择器
  18. var btn = document.getElementById("btn");
  19. console.log(btn,'第一个')
  20. // 2.通过css选择器获取标签内容
  21. var vase = document.querySelector(".vase");
  22. console.log(vase,'第二个')
  23. // 3.通过css选择器 获取所有标签内容 获取数组
  24. var list = document.querySelectorAll(".hi li");
  25. console.log(list,'第三个')
  26. // 4.获取类选择器 获取数组
  27. var news = document.getElementsByClassName("vase");
  28. console.log(news,'第四个')
  29. // 5.通过标签名获取 获取数组
  30. var flower = document.getElementsByTagName("ul");
  31. console.log(flower,'第五个')
  32. </script>
  33. </body>
  34. </html>