关于 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+、其他高级浏览器