selectors

包含一個(gè)或多個(gè)要匹配的選擇器的 DOM 字符串DOMString。該字符串必須是有效的 CSS 選擇器字符串,；如果不是,，則引發(fā)SYNTAX_ERR異常。請(qǐng)參閱使用選擇器定位 DOM 元素以獲取有關(guān)選擇器以及如何管理它們的更多信息,。

表示文檔中與指定的一組 CSS 選擇器匹配的第一個(gè)元素,，一個(gè) Element對(duì)象,。如果沒(méi)有匹配到，則返回 null,。

如果您需要與指定選擇器匹配的所有元素的列表,，則應(yīng)該使用querySelectorAll() 。

SYNTAX_ERR

指定selectors的語(yǔ)法無(wú)效,。

如果選擇器是一個(gè) ID,，并且這個(gè) ID 在文檔中錯(cuò)誤地使用了多次，那么返回第一個(gè)匹配該 ID 的元素,。

CSS 偽類不會(huì)返回任何元素,，見(jiàn) Selectors API 中的相關(guān)規(guī)定。

如果要匹配的 ID 或選擇器不符合 CSS 語(yǔ)法（比如不恰當(dāng)?shù)厥褂昧嗣疤?hào)或者空格）,，你必須用反斜杠將這些字符轉(zhuǎn)義,。由于 JavaScript 中，反斜杠是轉(zhuǎn)義字符,，所以當(dāng)你輸入一個(gè)文本串時(shí),，你必須將它轉(zhuǎn)義兩次（一次是為 JavaScript 字符串轉(zhuǎn)義，另一次是為 querySelector 轉(zhuǎn)義）：

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // 匹配第一個(gè) div

  document.querySelector('#foo:bar')    // 不匹配任何元素
  document.querySelector('#foo\\:bar')  // 匹配第二個(gè) div
</script>

這個(gè)例子中,，會(huì)返回當(dāng)前文檔中第一個(gè)類名為 "myclass" 的元素：

var el = document.querySelector(".myclass");

選擇器也可以非常強(qiáng)大,，如以下示例所示.

這里，一個(gè) class 屬性為"user-panel main"的 div 元素<div>(<div class="user-panel main">) 內(nèi)包含一個(gè) name 屬性為"login"的 input 元素<input> (<input name="login"/>) ,，如何選擇,，如下所示：

var el = document.querySelector("div.user-panel.main input[name='login']");