关于 document.querySelector

做用

返回第一个匹配指定选择器的文档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+、其余高级浏览器