Javascript 查詢選擇器

Michael Zippo

querySelector 和 getElementByID 這兩個方法允許您從 JavaScript 對像模型 DOM (Document) 中檢索元素。但是，每種方法都有自己的用例。

在本指南中，我們將介紹最常見的 querySelector 和 getElementById 用例。我們還比較了這兩種方法，並通過一個基本示例向您介紹它們的工作原理。

什麼是 querySelector？

JavaScript querySelector() 方法允許您使用 CSS 選擇器檢索 DOM 元素或網頁。此方法附帶一個名為 querySelectorAll () 的姊妹函數，它選擇與特定 DOM 選擇器匹配的所有元素。

這兩種方法非常通用。這是因為 CSS 選擇器語法允許您從網頁中選擇一個元素。

使用 querySelector，您不必擔心受限於只能為或 ID 類選擇項目的能力，就像使用 getElementById 或 getElementsByClassName 一樣。如果您選擇的元素與您在 CSS 樣式表中選擇的元素相似，這些方法特別有用。

讓我們看一下 querySelector 方法。我們將首先編寫一個 HTML 元素，稍後我們可以在 JavaScript 中選擇它：

我們已經定義了一段文本，其名稱為“可訪問性”類。然後我們使用 querySelector()

這段代碼選擇第一個類等於“可訪問性”的元素。這 ”。”表示我們要選擇一個類。如果我們有兩個具有“可訪問性”類的元素，我們可以使用 querySelectorAll () 來同時檢索它們

getElementById () 方法根據屬性ID獲取元素，因此得名。

此方法比 querySelector 更嚴格，因為您無法根據特定 ID 檢索項目。

如果您想從網頁中檢索單個元素，請使用此選項。事實上，HTML ID 必須是唯一的用於特定元素。您不能使用身份卡來引用網頁上的兩個元素。

我們將使用 getElementById 選擇器檢索一個元素。首先，我們將編寫 HTML 代碼我們將選擇一個元素：

我們使用JavaScript 指令來檢索ID 等於“comments”的元素。這是我們在網頁上發表評論的

元素。

這兩種方法之間明顯的相似之處在於選擇網頁的兩個元素。它們以不同的方式進行。

使用 querySelector 聲明，您可以根據 CSS 選擇器選擇元素。這意味著您可以按 ID、類或任何其他類型的選擇器選擇項目。使用 getElementById 方法，您不能根據其 ID 選擇元素。

作為一般規則，您應該選擇最清楚地完成工作的選擇器。

如果您只是需要通過 ID 或類選擇元素，可以分別使用 getElementById 或 getElementsByClassName。如果需要使用更精細的規則來選擇item，querySelector方法是最好的選擇

querySelector 和 getElementById 早就成為 JavaScript 的一部分。因此，現代瀏覽器都完全支持這些方法。

querySelector 方法允許您使用 CSS 選擇查詢檢索元素。getElementById 方法通過其 DOM 檢索元素ID。

這兩種方法都具有廣泛的瀏覽器支持。如果您需要使用更複雜的規則選擇項目，這些規則可以使用 CSS 選擇器輕鬆表示。如果您想根據它的 ID，使用 getElementById 是一個不錯的選擇。

現在你已經知道什麼時候使用 querySelector 和 getElementByID 了像專業人士一樣！