Javascript 查詢選擇器
__del__ |
identity |
JavaScript |
mean |
sin |
tile
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?
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 了像專業人士一樣!