Sizzle selector engine

logo

The Sizzle Selector Engine is a JavaScript- based engine for selecting elements within the Document Object Model (DOM). The engine, developed by the jQuery team, can be used stand-alone and was released with version 1.3 of the JavaScript framework jQuery. Sizzle is a native part of jQuery; because it does not depend on other program libraries, developers can also integrate this engine into their project.

Problem

JavaScript only offers the developer limited possibilities to select elements of the DOM directly. A native and widely supported option for selecting an element with a given ID is to use the function getElementById('idName'). But web developers often need more elements of the same type, for example all elements that have the same class or elements that contain a certain attribute. In all individual cases, the developer often has to write multi-line functions in order to create a browser-compatible solution. The function for selecting all elements of the same type getElementsByTagNameas well as a function for selecting all elements with a class name getElementsByClassNameis not supported correctly by older browsers. Although many selections within the DOM are simplified with HTML5 , this standard of the World Wide Web Consortium is not yet correctly supported by all browsers.

Sizzle does this work for the developer and provides a cross-browser, intuitive API .

principle

The selection is almost identical to that of the Cascading Style Sheets , CSS3 selectors are also supported.

example

If you want to spanselect all elements that are a direct child of all pelements, this is done using the following code:

Sizzle('p > span');

The selection of links that contain example.org is done as follows:

Sizzle('a[href*="example.org"]');

Since Sizzle is seamlessly integrated into jQuery, a selection in this framework is based on the same principle:

$('a[href*="example.org"]');

Web links

• Sizzle project site

Individual evidence

1. ↑ Brief introduction to Sizzle ( Memento of the original from September 25, 2011 in the Internet Archive ) Info: The archive link was automatically inserted and not yet checked. Please check the original and archive link according to the instructions and then remove this notice. 
2. ↑ An example function for selecting all elements of the same class without using Sizzle
3. ↑ Browser support for getElementsByTagName ()
4. ↑ Internet Explorer compatible solution for getElementsByClassName