document自带的强大的选择器querySelector/querySelectorAll

最新推荐文章于 2025-03-31 16:44:58 发布

转载最新推荐文章于 2025-03-31 16:44:58 发布 · 3.7k 阅读

文章标签：

#js #css #document原生选择器 #querySelector

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

css

1 篇文章

订阅专栏

document原生选择器

1 篇文章

订阅专栏

本文介绍了如何使用querySelector和querySelectorAll方法进行DOM操作，这两种方法支持CSS选择器语法，能够帮助开发者更高效地定位和修改页面元素。

部署运行你感兴趣的模型镜像

我们用原生document的时候往往使用 document.getElementById 这种依靠class ,Id ,标签名 ,来获得想找到的节点。

这在逻辑结构比较简单的时候还是不错的选择，可是当结构层级复杂事，就不是那么好用了。

这个时候我们就可以使用 document提供的另外一个强大的方法,querySelector/querySelectorAll ,这个方法支持css的样式写法

eg:

document.querySelector("div.test>p:first-child");

document.querySelectorAll("div.test>p:first-child")[0];

现在应该对于
 querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。

再举个例子:我们使用
 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

var emphasisText
 = document.querySelectorAll(".emphasis");

for( var i
 = 0 , j = emphasisText.length ; i < j ; i++ ){

 emphasisText[i].style.fontWeight
 = "bold";

}

后附一些刚才发现的css写法

     (1)通配符：

      id属性以code开始的所有input标签  :  document.querySelectorAll("input[id^='code']");

       id属性以code结束的所有input标签 : document.querySelectorAll("input[id$='code']");

       id属性包含code的所有input标签 :document.querySelectorAll("input[id*='code']");

   (2)根据索引选择

       选择索引为偶数的所有tr标签: document.querySelectorAll("tbody
 tr:even");

       选择索引为奇数的所有tr标签: document.querySelectorAll("tbody
 tr:odd");