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";