5_选择器.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div id="div1"></div>
  11. <div class="div2">1</div>
  12. <div class="div2">2</div>
  13. <script>
  14. // var div1 = document.getElementById('div1')
  15. // var div2 = document.getElementsByClassName('div2')
  16. //querySelector 获取元素 但是只获取目标元素的第一个
  17. // var div1 = document.querySelector('#div1')
  18. // console.log(div1)
  19. // var div2 = document.querySelector('.div2')
  20. // console.log(div2)
  21. // var aDiv = document.querySelector('div')
  22. // console.log(aDiv)
  23. //querySelectorAll 查找所有满足条件的元素
  24. //NodeList 类数组 不是一个真正的数组 只具备数组当中的部分方法
  25. var div2 = document.querySelectorAll('.div2')
  26. console.log(div2)
  27. var aDiv = document.querySelectorAll('div')
  28. console.log(aDiv)
  29. var a = []
  30. console.log(a)
  31. </script>
  32. </body>
  33. </html>