JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.2.5 Selecting Elements with CSS Selectors

15.2.5 Selecting Elements with CSS Selectors


CSS stylesheets have a very powerful syntax, known as selectors, for describing elements or sets of elements within a document. Full details of CSS selector syntax are beyond the scope of this book,1 but some examples will demonstrate the basics. Elements can be described by ID, tag name, or class:

#nav // An element with id="nav" div // Any

element .warning // Any element with "warning" in its class attribute


More generally, elements can be selected based on attribute values:

p[lang="fr"] // A paragraph written in French:

*[name="x"] // Any element with a name="x" attribute

These basic selectors can be combined:

span.fatal.error // Any with "warning" and "fatal" in its class span[lang="fr"].warning // Any warning in French

Selectors can also specify document structure:

#log span // Any descendant of the element with id="log" #log>span // Any child of the element with id="log" body>h1:first-child // The first

child of the


Selectors can be combined to select multiple elements or multiple sets of elements:

div, #log // All

elements plus the element with id="log"


As you can see, CSS selectors allow elements to be selected in all of the ways described above: by ID, by name, by tag name, and by class name. Along with the standardization of CSS3 selectors, another W3C standard, known as “Selectors API” defines JavaScript

1. CSS3 selectors are specified by http://www.w3.org/TR/css3-selectors/ .

15.2 Selecting Document Elements | 369

methods for obtaining the elements that match a given selector.2 The key to this API is the Document method querySelectorAll(). It takes a single string argument containing a CSS selector and returns a NodeList that represents all elements in the document that match the selector. Unlike previously described element selection methods, the NodeList returned by querySelectorAll() is not live: it holds the elements that match the selector at the time the method was invoked, but it does not update as the document changes. If no elements match, querySelectorAll() returns an empty NodeList. If the selector string is invalid, querySelectorAll() throws an exception.

In addition to querySelectorAll(), the document object also defines querySelector(), which is like querySelectorAll(), but returns only the first (in document order) matching element or null if there is no matching element.

These two methods are also defined on Elements (and also on DocumentFragment nodes; see §15.6.4 ). When invoked on an element, the specified selector is matched against the entire document, and then the result set is filtered so that it only includes descendants of the specified element. This may seem counterintuitive, as it means that the selector string can include ancestors of the element against which it is matched.

Note that CSS defines :first-line and :first-letter pseudoelements. In CSS, these match portions of text nodes rather than actual elements. They will not match if used with querySelectorAll()or querySelector(). Also, many browsers will refuse to return matches for the :link and :visited pseudoclasses, as this could expose information about the user’s browsing history.

All current browsers support querySelector()and querySelectorAll(). Note, however, that the specification of these methods does not require support for CSS3 selectors: browsers are encouraged to support the same set of selectors that they support in style-sheets. Current browsers other than IE support CSS3 selectors. IE7 and 8 support CSS2 selectors. (IE9 is expected to have CSS3 support.)

querySelectorAll() is the ultimate element selection method: it is a very powerful technique by which client-side JavaScript programs can select the document elements that they are going to manipulate. Fortunately, this use of CSS selectors is available even in browsers without native support for querySelectorAll(). The jQuery library (see Chapter 19 ) uses this kind of CSS selector-based query as its central programming paradigm. Web applications based on jQuery use a portable, cross-browser equivalent to querySelectorAll() named $().

jQuery’s CSS selector matching code has been factored out and released as a standalone library named Sizzle, which has been adopted by Dojo and other client-side libraries.3 The advantage to using a library like Sizzle (or a library that uses Sizzle) is that

  1. The Selectors API standard is not part of HTML5 but is closely affiliated with it. See http://www.w3.org/ TR/selectors-api/ .
  2. A stand-alone version of Sizzle is available at http://sizzlejs.com .

selections work even on older browsers, and there is a baseline set of selectors that are guaranteed to work on all browsers.

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27955.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1