JS中 querySelector和querySelectorAll选择网页元素

最新推荐文章于 2024-05-26 00:30:00 发布

Stirve unremitting

最新推荐文章于 2024-05-26 00:30:00 发布

阅读量440

点赞数

分类专栏：笔记文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106677134

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的querySelector和querySelectorAll方法，用于在HTML文档中选取元素。querySelector返回匹配指定CSS选择器的第一个元素，而querySelectorAll则返回所有匹配的选择器元素组成的NodeList集合。了解这两个方法的用法对于高效地操作DOM至关重要。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id=title>title</h1>
  <p class="pra">文字</p>
  <p class="pra">文字</p>
  <p class="pra">文字</p>
  <div>box</div>
  <div>
    <p>innerP</p>
  </div>
  <script>
    var title = document.querySelector('#title')
    // querySelector只能取到第0个满足选择器的元素
    var pra = document.querySelector('.pra')
    var div = document.querySelector('div')
    console.log(title)
    console.log(pra)
    console.log(div)

    // 把所有满足选择器的元素全部取到
    var pras = document.querySelectorAll('.pra')
    console.log(pras)

    // 后代、子代选择器都可以在这里直接写
    var innerP = document.querySelector('div p')
    console.log(innerP)


  </script>
</body>
</html>