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中文网其它相关文章!
java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号