關於 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+、其餘高級瀏覽器