DOM扩展之querySelector()和querySelectorAll()

最新推荐文章于 2025-02-24 23:24:00 发布

㼛思雨

最新推荐文章于 2025-02-24 23:24:00 发布

阅读量980

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45147894/article/details/109098914

版权

Javascript 专栏收录该内容

90 篇文章

订阅专栏

本文介绍了HTML5中新增的querySelector()和querySelectorAll()方法，这两个方法允许开发者像使用CSS选择器一样方便地查找DOM元素。querySelector()返回匹配的第一个元素，而querySelectorAll()返回所有匹配的元素集合。文中给出了多个示例，如根据ID、类名、属性等选择元素，并强调这两个方法不支持伪类选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在原生的Javascript开发中，查找DOM往往是开发人员的第一个头疼的问题，原生的Javascript所提供的DOM选择方法并不多，仅仅局限于通过tag、name、id等方式来查找，这显然是远远不够的。如果要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。HTML5向Web API 新引入的querySelector()和querySelectorAll()这两个方法能更方便的从DOM选取元素，功能类似于jQuery的选择器。querySelector()和querySelectorAll()作为查找DOM的又一途径，极大的方便了开发者，使用他们，就可以像使用CSS选择器一样快速的查找到需要的节点。

两个方法使用差不多的语法，都是接受一个字符串参数，该参数需要是合法的CSS选择语法。querySelector()方法仅仅返回匹配指定选择器的第一个元素，如果需要返回所有的元素，使用querySelectorAll()方法替代。

其中参数selector可以包含多个CSS选择器，用逗号隔开。

element=document.querySelector('selector1,selector2,.....');

element=document.querySelectorAll('selector1,selector2,.....');

注意：支持该方法的第一个浏览器的版本号，如IE8.chrome4、Firefox3.5、Opera10以及Safari3.1。使用这两个方法无法查找带伪类状态的元素，如querySelector(':hover')不会得到预期结果。

document.querySelector("#demo"); //获取文档中ID="demo"的元素。

该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。

element=document.querySelector("div#container"); //返回id为container的首个div

element=document.querySelector(".foo,.bar"); //返回带有foo或者bar样式类的首个元素

<h2>二级标题</h2>

<h3>三级标题</h3>

document.querySelector("h2,h3").style.backgroundColor="red"; //为文档的第一个<h2>,<h3>元素添加背景颜色

如果<h3>元素位于<h2>元素之前，<h3>元素将会被设置指定的背景颜色。

document.querySelector("a[target]"); //获取文档中有"target"属性的第一个<a>元素

var img=document.querySelector("img.demo") ; //取得包含类"demo"的第一个img元素

querySelectorAll方法返回所有满足条件的元素，结果是个nodeList集合。

获取页面class属性为“red”的元素：

<script>
 document.getElementsByClassName("red")相当于：document.querySelectorAll("red")
       var oAs=document.getElementById("div1").querySelectorAll("a");
       // 取得id为div1的div中的所有<a>元素（类似于getElementsByTagName("a")）
       var demo=document.querySelectorAll(".demo");
                            //取得类为demo的所有的元素
        var oDivAs=document.querySelector("div a");
                             //取得所有div元素中的a元素
for(var i=0;i<oDivAs.length;i++){
                //取得NodeList元素的每一个，可用item()
                isIndex=oDivAs.item(i)   //相当于isIndex=oDivAs[i]
                elements=document.querySelectorAll("div.foo");
                //返回所有带有foo类样式的div
</script>