JavaScript 学习笔记 querySelectorAll与querySelector的使用

技术1年前 (2022)发布 不存在的铃喵
168 0 0

querySelectorAll与querySelector的区别:
querySelectorAll : 找出所有匹配的节点并返回数组.
querySelector : 找到一个后就返回节点对象。

1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。
2、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。
3、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果

找出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]”)

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...