querySelectorAll与querySelector的区别

querySelectorAll与querySelector的区别querySelecto 与 querySelecto 的区别 querySelecto 找出所有匹配的节点并返回数组 querySelecto 找到一个后就返回节点对象 1 querySelecto 只返回匹配的第一个元素 如果没有匹配项 返回 null 2 querySelecto 返回匹配的元素集合 如果没有匹配项 返回空的 nodelis

背景:前端数据处理的时候必然涉及DOM相关的操作,此篇博文针对querySelector和querySelectorAll对DOM节点的获取做一个简单的纪要。 问题:querySelectorAll与querySelector两者的区别是什么? 说明: 1. querySelectorAll 是找出所有匹配的节点后,返回对应的元素节点数组. 2. querySelector 是找到一个后立刻返回找到的第一个节点对象,如果没有则返回null. 3. 返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果 下面是几个简单的Demo样例,方便后面可以清晰的get到关键点: 找出body标签下的第一个div document.body.querySelectorAll("div")[0] 找出所有标签 document.querySelectorAll("*") 找出head下所有的标签 document.head.querySelectorAll("*") 找出所有class=box的标签 document.querySelectorAll(".box") 找出所有class=box的div标签 document.querySelectorAll("div.box") 找出所有id=lost的标签 document.querySelectorAll("#lost") 找出所有p标签并且id=lost的标签 document.querySelectorAll("p#lost") 找出所有name=qttc的标签 document.querySelectorAll("*[name=qttc]") 找出所有存在name属性的标签 document.querySelectorAll("*[name]") 找出所有class=hot并且存在name属性的p标签 document.querySelectorAll("p.hot[name]") document.querySelectorAll("p[class=hot][name]")

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/199732.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 下午12:20
下一篇 2026年3月20日 下午12:20


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号