阿里云

querySelector-强大的原生DOM选择器

在日常开发过程中,涉及到DOM的操作往往是让前端程序员头疼的。原生的JavaScript提供的操作仅仅是通过tag、id、name等方式来查找,如果想要实现更为复杂的查找,则需要使用正则或类库来实现。下面要说的是querySelector和querySelectorAll。这是操作DOM的新方式,目前所有的浏览器厂商均已经支持。就连IE都在IE8上面做出了支持。下面一起来看一下如何使用吧!


定义

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意:querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

注释:querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样。没有增加复杂的学习成本。


浏览器支持


语法

document.querySelector(CSS selectors)


参数值介绍

必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id、类、 类型、属性、属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。


异常

匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。


实例

1、获取文档中第一个 <span> 元素:

document.querySelector("span");

2、获取文档中 class="demo" 的第一个元素:

document.querySelector(".demo");

3、获取文档中 class="demo" 的第一个 <span> 元素:

document.querySelector("span.demo");

4、获取文档中有 "target" 属性的第一个 <a> 元素:

document.querySelector("a[target]");

5、设置文档中第一个h1的背景颜色为红色:

document.querySelector("h1").style.backgroundColor = "red";


喜欢就点个赞吧