querySelector 与 querySelectorAll 都用于选择和操作 DOM 元素，但它们有一些不同的行为
1.querySelector
返回 DOM 中满足 CSS 选择器的第一个匹配元素。如果未找到匹配项，则返回 null。
<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<script>
const link = document.querySelector("a")
console.log(link); // <a href="/html/">HTML</a>
</script>
</body>
</html>
在上面的代码示例中，我们可以看到在脚本标签内我选择了一个标签，并且我们只获得第一个匹配元素，而不是全部。
2.querySelectorAll
以 NodeList 的形式返回所有匹配的元素，NodeList 是元素的集合。如果未找到匹配项，则返回一个空 NodeList。
<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<script>
const link = document.querySelectorAll("a")
console.log(link); // // [object NodeList] (4) [<a/>,<a/>,<a/>,<a/>]
</script>
</body>
</html>
在上面的代码示例中，我们可以看到在脚本标签内我选择了一个标签，并且我们将所有匹配的元素作为 NodeList 获取。
以上是javascript 中的 querySelector 与 querySelectorAll的详细内容。更多信息请关注PHP中文网其他相关文章！
