CSSQUERY（）：與CSS選擇器查詢DOM-js教程-PHP中文網

cssQuery(): query the DOM with CSS selectors

(來自 Planet Web 2.0) cssQuery() 是 Dean Edwards（IE7 腳本的知名開發者）開發的一個新的 JavaScript 庫，它基於文檔對像模型 (DOM)，允許您使用 CSS 選擇器語法獲取文檔元素的引用。 DOM 是一個強大而高效的 API，用於讀取、寫入和修改 HTML 和 XML 文檔。與 JavaScript 結合使用時，它是 DHTML 效果的基礎。但是，有時它可能需要大量的代碼。考慮一下這個小片段，它來自我們在 SitePoint 上使用的表格排序腳本：

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0; ti < tbls.length; ti++) {
        thistbl = tbls[ti];
        ts_makesortable(thistbl);
    }
}

登入後複製

這段代碼很好，但它實際上只是對應用了 sortable 類的每個表格元素調用 ts_makeSortable 函數。以下是使用 cssQuery() 的代碼：

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    tbls = cssQuery("table.sortable");
    for (ti=0; ti < tbls.length; ti++) {
        ts_makesortable(tbls[ti]);
    }
}

登入後複製

在典型的 DHTML 腳本中，由此帶來的代碼節省是驚人的。當然，您會犧牲一些性能，因為您的 CSS 選擇器必須在純 JavaScript 中進行解析和解釋，但到目前為止，很少有 JavaScript 應用程序會讓瀏覽器不堪重負。

cssQuery() 支持所有 CSS1 和 CSS2 選擇器，以及許多 CSS3 選擇器。這甚至比大多數當前的 Web 瀏覽器更好——而且它完全是用純 JavaScript 編寫的！

更新：

Simon Willison 在 2003 年 3 月創建了一個類似的庫 getElementsBySelector()。它不支持那麼多 CSS 選擇器類型，但它可能包含日常使用中所需的大部分功能。因此，它可能更輕量級。

關於 CSS Query 的常見問題

什麼是 CSS Query 以及它是如何工作的？

CSS Query，也稱為 CSS 選擇器，是 Web 開發中用於根據元素的 id、類、類型、屬性等選擇和操作 HTML 元素的強大工具。它的工作原理是將特定樣式應用於與指定選擇器匹配的元素。這使開發人員能夠輕鬆創建動態和交互式網頁。 CSS Query 廣泛用於 JavaScript 進行 DOM 操作，以及在 Selenium 等測試工具中查找元素。

如何使用 CSS Query 根據屬性選擇元素？

CSS Query 允許您使用方括號 [] 根據元素的屬性進行選擇。例如，要選擇具有特定屬性的所有元素，您可以使用語法：element[attribute]。要選擇具有特定屬性值元素，可以使用語法：element[attribute="value"]。當您希望以不同的方式設置具有特定屬性的元素的樣式時，此功能特別有用。

我可以一次使用 CSS Query 選擇多個元素嗎？

是的，CSS Query 允許您使用逗號一次選擇多個元素。例如，語法：h1, h2, h3 {color: red} 將選擇所有 h1、h2 和 h3 元素，並為其應用紅色顏色。當您希望對多個元素應用相同的樣式時，此功能非常有用。

如何使用 CSS Query 選擇子元素？

CSS Query 允許您使用 > 運算符選擇子元素。例如，語法：div > p 將選擇作為 div 元素的直接子元素的所有 p 元素。當您希望將子元素的樣式與父元素的樣式區分開來時，此功能非常有用。

我可以使用 CSS Query 根據元素的狀態進行選擇嗎？

是的，CSS Query 允許您使用偽類根據元素的狀態進行選擇。例如，語法：a:hover {color: red} 將在懸停在所有 a 元素上時選擇它們，並為其應用紅色顏色。此功能對於創建交互式網頁非常有用。

如何使用 CSS Query 選擇兄弟元素？

CSS Query 允許您使用運算符選擇兄弟元素。例如，語法：div p 將選擇緊跟在 div 元素之後的 p 元素。當您希望根據元素在 HTML 文檔中的位置設置其樣式時，此功能非常有用。

我可以使用 CSS Query 根據元素在 HTML 文檔中的位置進行選擇嗎？

是的，CSS Query 允許您使用 :first-child、:last-child 和 :nth-child(n) 等偽類根據元素在 HTML 文檔中的位置進行選擇。例如，語法：p:first-child {color: red} 將選擇第一個 p 元素，並為其應用紅色顏色。此功能對於創建動態和交互式網頁非常有用。

如何使用 CSS Query 根據元素的類型進行選擇？

CSS Query 允許您使用元素類型作為選擇器來根據元素的類型進行選擇。例如，語法：p {color: red} 將選擇所有 p 元素，並為其應用紅色顏色。當您希望以相同的方式設置特定類型的所有元素的樣式時，此功能非常有用。

我可以使用 CSS Query 根據元素的類或 id 進行選擇嗎？

是的，CSS Query 允許您使用 . 運算符根據元素的類進行選擇，並使用 # 運算符根據元素的 id 進行選擇。例如，語法：.class {color: red} 將選擇所有具有類“class”的元素，並為其應用紅色顏色。同樣，語法：#id {color: red} 將選擇具有 id“id”的元素，並為其應用紅色顏色。當您希望將特定元素的樣式與其他元素的樣式區分開來時，此功能非常有用。

如何使用 CSS Query 選擇與特定選擇器不匹配的元素？

CSS Query 允許您使用 :not() 偽類選擇與特定選擇器不匹配的元素。例如，語法：p:not(.class) {color: red} 將選擇所有不具有類“class”的 p 元素，並為其應用紅色顏色。當您希望設置除與特定選擇器匹配的元素之外的所有元素的樣式時，此功能非常有用。

以上是CSSQUERY（）：與CSS選擇器查詢DOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！