背景:前端数据处理的时候必然涉及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]")
今天的文章query和enquire_数据库query用法[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/75771.html