querySelectorAll与querySelector的区别

背景:前端数据处理的时候必然涉及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]")

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值