作用
返回第一个婚配指定选择器的文档DOM节点,按深度优先前序分列。
声明
element = document.querySelector(selectors);
个中
element 是一个DOM对象.
selectors 是包括一个或许多个由逗号分开的CSS选择器。字符串。
示例
在下面这个示例中,文档中第一个具有 myclass 类的DOM元素将会被返回:
var el = document.querySelector(".myclass");
注重
倘使没有婚配到将返回 null 。不然返回第一个婚配到的元素。
倘使选择器是一个ID,但ID毛病的在文档中被使用了屡次,它将返回第一个婚配到的元素。
在指定的选择器参数是无效的时刻会抛出一个 SYNTAX_ERR 非常。
querySelector() 由 Selectors API 引入。
querySelector 的字符串参数必需相符CSS语法。
按 Selectors API 的指定, CSS伪类不会返回任何元素。
假如须要婚配没有按CSS声明的选择器,比方不适当的使用了冒号或许空格,你必需经由过程加斜杠转义这些字符。由于斜杠‘/’本身在JavaScript中是个转义字符,假如你想输入了一个字面的字符,你须要转义两次,一次由于 JavaScript 字符串,一次由于 querySelector。
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // Does not match anything
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // Match the first div
document.querySelector('#foo:bar') // Does not match anything
document.querySelector('#foo\\:bar') // Match the second div
</script>
浏览器兼容性
IE8+、其他高等浏览器