document.querySelector

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/document/index.md)

摘要

回傳 document 第一個符合特定選擇器群組的元素（採用深度優先，前序追蹤 document 節點）。

語法

element = document.querySelector(selectors);

其中

  • element 是元素物件。
  • selectors 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。

範例

這個範例會回傳 document 選到的第一個 "myclass" class：

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

注意事項

若找不到相應元素就會回傳 null，否則回傳第一個符合的元素。

若選擇器符合某 ID，且該 ID 在 document 中誤用數次，就會回傳第一個符合的元素。

當特定選擇器群組無效，會擲回 SYNTAX_ERR 例外狀況。

querySelector() 是由 Selectors API 引入的選擇器。

傳入 querySelector 的字串參數必須遵循 CSS 語法。若要選取未遵循 CSS 語法的 ID 或選擇器（例如不當使用冒號或空格），必須強制加上兩個反斜線來跳脫錯誤的字元：

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

<script>
  document.querySelector("#foo\bar"); // 甚麼都沒選到
  document.querySelector("#foo\\\\bar"); // 選到第一個 div
  document.querySelector("#foo:bar"); // 甚麼都沒選到
  document.querySelector("#foo\\:bar"); // 選到第二個 div
</script>

瀏覽器相容性

BCD tables only load in the browser

規範

Specification
DOM Standard
# ref-for-dom-parentnode-queryselector①

詳見