CSSQUERY（）：与CSS选择器查询DOM

(来自 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中文网其他相关文章！