cssQuery(): query the DOM with CSS selectors

(from Planet Web 2.0) cssQuery() is a new JavaScript library developed by Dean Edwards (a well-known developer of IE7 scripts). It is based on the Document Object Model (DOM) and allows you to use the CSS selector syntax to get references to document elements. DOM is a powerful and efficient API for reading, writing, and modifying HTML and XML documents. When used in conjunction with JavaScript, it is the basis for the DHTML effect. However, sometimes it can require a lot of code. Consider this little snippet, which comes from the table sorting script we use on 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);
    }
}

This code is good, but it actually just calls the ts_makeSortable function to every table element that applies the sortable class. Here is the code using cssQuery():

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

In typical DHTML scripts, the resulting code savings are amazing. Of course, you'll sacrifice some performance, as your CSS selector has to be parsed and interpreted in pure JavaScript, but so far few JavaScript applications have overwhelmed the browser.

cssQuery() supports all CSS1 and CSS2 selectors, as well as many CSS3 selectors. This is even better than most current web browsers – and it’s written entirely in pure JavaScript!

Update:

Simon Willison created a similar library in March 2003 getElementsBySelector(). It doesn't support that many CSS selector types, but it may contain most of the features you need in your daily use. Therefore, it may be lighter.

FAQs about CSS Query

What is CSS Query and how does it work?

CSS Query, also known as the CSS selector, is a powerful tool in web development for selecting and manipulating HTML elements based on the id, class, type, attribute, etc. It works by applying a specific style to elements that match the specified selector. This enables developers to easily create dynamic and interactive web pages. CSS Query is widely used in JavaScript for DOM operations and to find elements in testing tools such as Selenium.

How to use CSS Query to select elements based on attributes?

CSS Query allows you to select based on the attributes of the element using square brackets []. For example, to select all elements with a specific attribute, you can use the syntax: element[attribute]. To select an element with a specific attribute value, you can use the syntax: element[attribute="value"]. This feature is especially useful when you want to style elements with specific attributes in different ways.

Can I select multiple elements using CSS Query at once?

Yes, CSS Query allows you to select multiple elements at once using a comma. For example, syntax: h1, h2, h3 {color: red} will select all h1, h2, and h3 elements and apply a red color to them. This feature is useful when you want to apply the same style to multiple elements.

How to use CSS Query to select child elements?

CSS Query allows you to select child elements using the > operator. For example, syntax: div > p will select all p elements as direct child elements of the div element. This is useful when you want to distinguish the style of a child element from the style of a parent element.

Can I use CSS Query to select based on the state of an element?

Yes, CSS Query allows you to use pseudo-classes to select based on the state of an element. For example, syntax: a:hover {color: red} will select them when hovering over all a elements and apply a red color to them. This feature is very useful for creating interactive web pages.

How to use CSS Query to select sibling elements?

CSS Query allows you to select sibling elements using the operator. For example, syntax: div p will select the p element immediately following the div element. This feature is useful when you want to style elements based on where they are in an HTML document.

Can I use CSS Query to select based on where the element is in the HTML document?

Yes, CSS Query allows you to use pseudo-classes such as :first-child, :last-child, and :nth-child(n) to select based on where the element is in the HTML document. For example, syntax: p:first-child {color: red} will select the first p element and apply a red color to it. This feature is useful for creating dynamic and interactive web pages.

How to use CSS Query to select based on the type of element?

CSS Query allows you to use element types as selectors to select based on the type of element. For example, syntax: p {color: red} will select all p elements and apply a red color to them. This feature is useful when you want to style all elements of a specific type in the same way.

Can I use CSS Query to select based on the element's class or id?

Yes, CSS Query allows you to use the . operator to select based on the element's class and use the # operator to select based on the element's id. For example, syntax: .class {color: red} will select all elements with class "class" and apply a red color to it. Similarly, syntax: #id {color: red} will select the element with id "id" and apply a red color to it. This feature is useful when you want to distinguish the style of a specific element from the style of other elements.

How to use CSS Query to select elements that do not match a specific selector?

CSS Query allows you to use the :not() pseudo-class to select elements that do not match a specific selector. For example, syntax: p:not(.class) {color: red} will select all p elements that do not have class "class" and apply a red color to it. This feature is useful when you want to style all elements except the elements that match a specific selector.

The above is the detailed content of cssQuery(): query the DOM with CSS selectors. For more information, please follow other related articles on the PHP Chinese website!