javascript 中的 querySelector 与 querySelectorAll-js教程-PHP中文网

javascript 中的 querySelector 与 querySelectorAll

DDD

发布： 2024-10-17 19:38:26

转载

962人浏览过

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>

登录后复制

在上面的代码示例中，我们可以看到在脚本标签内我选择了一个标签，并且我们只获得第一个匹配元素，而不是全部。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

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中文网其它相关文章！