登录
首页 >  文章 >  前端

javascript 中的 querySelector 与 querySelectorAll

来源：dev.to

时间：2024-11-26 20:27:54 450浏览 收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《javascript 中的 querySelector 与 querySelectorAll》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

javascript 中的 querySelector 与 querySelectorAll

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》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>