cssquery_cssQuery（）：使用CSS选择器查询DOM

cssquery

（Via Planet Web 2.0 ） cssQuery（）是来自IE7脚本的 Dean Edwards的新JavaScript库，位于文档对象模型 （DOM）的顶部，可让您使用CSS选择器语法获取对文档元素的引用。

DOM是强大，高效的API，用于读取，编写和修改HTML和XML文档。 与JavaScript一起使用，它是DHTML效果的基础。 但是男孩有时会需要很多代码。

考虑一下这个小片段，来自我们在SitePoint上使用的表排序脚本：

function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            ts_makeSortable(thisTbl);
        }
    }
}

这段代码非常好，但是实际上它所做的就是在每个表元素上应用可排序的类调用ts_makeSortable函数。 使用cssQuery（）的代码如下：

function sortables_init() {
    // Find all tables with class sortable and make them sortable
    tbls = cssQuery("table.sortable");
    for (ti=0;ti<tbls.length;ti++) {
        ts_makeSortable(tbls[ti]);
    }
}

在典型的DHTML脚本中，这可以节省大量代码。 当然，由于必须使用纯JavaScript来解析和解释CSS选择器，因此您会放弃一些性能，但是由于很少有JavaScript应用程序使浏览器屈服。

cssQuery（）支持所有CSS1和CSS2选择器，以及许多CSS3选择器。 哎呀，这比大多数当前的Web浏览器要好-都是用纯JavaScript编写的！

更新： Simon Willison于2003年3月生产了一个类似的库getElementsBySelector（） 。它不支持那么多CSS选择器类型，但它可能超出了日常使用中的需求。 结果是它变轻了。

翻译自: https://www.sitepoint.com/cssquery-query-the-dom-with-css-selectors/

cssquery