Introduction to selector. js in Prototype User Guide _ prototype

Selector uses cssselector to match page elements. To understand Selector, you must first understand cssselector. The following is the css2 selector syntax. Of course, many browsers only support part of this syntax, the Selector in Prototype mainly supports tag Selector, class Selector, id Selector, and attribute Selector, which basically includes all the types we usually use.

The following table summarizes CSS2 selector syntax. For details, see http://www.w3.org/TR/REC-CSS2/selector.html:

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (I. e., an element of type E ).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E> F	Matches any F element that is a child of an element E.	Child selectors
E: first-child	Matches element E when E is the first child of its parent.	The: first-child pseudo-class
E: link E: visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (: link) or already visited (: visited ).	The link pseudo-classes
E: active E: hover E: focus	Matches E during certain user actions.	The dynamic pseudo-classes
E: lang (c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined ).	The: lang () pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E [foo]	Matches any E element with the "foo" attribute set (whatever the value ).	Attribute selectors
E [foo = "warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning ".	Attribute selectors
E [foo ~ = "Warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning ".	Attribute selectors
E [lang | = "en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en ".	Attribute selectors
DIV. warning	HTML only. The same as DIV [class ~ = "Warning"].	Class selectors
E # myid	Matches any E element ID equal to "myid ".	ID selectors

Selector contains Selector objects and classes,

The Selector object has the following two methods:

Match (element ):Whether the Element matches this selector.
FindElements (parentNode ):All child element lists in parentNode that match this selector

The usage is also simple var s = new Selector (expression); s. match (element); s. findElements ($ (element), where expression can be the following methods: "p", "# id ",". class "," p # id "," p [attribute] "," p [attribute = fff] "," p [attribute! = Sdf]"

Selector also has several static methods, which are:

MatchElements (elements, expression ):Returns the list of elements that match the expression in elements.
FindElement (elements, expression, index ):Returns the index element in the expression-compliant element list of elements.
FindChildElements (element, expressions ):Find out the list of expressions-compliant elements in the child element of the element. expressions is an expression array, and the expression supports the "p li. # id" format.

$ Method:Simply call return Selector. findChildElements (document, $ A (arguments ))

Although Selector has so many methods, most of them are called internally and we usually seldom use them because we have a convenient method $, which is sufficient for most cases.