Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Locating DOM elements using selectors

Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil) . Junte-se a nós e ajude a fazer o trabalho!

The Selectors API provides methods that make it quick and easy to retrieve Element nodes from the DOM by matching against a set of selectors. This is much faster than past techniques, wherein it was necessary to, for example, use a loop in JavaScript code to locate the specific items you needed to find.

The NodeSelector interface

This specification adds two new methods to any objects implementing the Document, DocumentFragment, or Element interfaces:

querySelector
Returns the first matching Element node within the node's subtree. If no matching node is found, null is returned.
querySelectorAll
Returns a NodeList containing all matching Element nodes within the node's subtree, or an empty NodeList if no matches are found.
Note: The NodeList returned by querySelectorAll() is not live. This is different from other DOM querying methods that return live node lists.

You may find examples and details by reading the documentation for the querySelector() and querySelectorAll() methods, as well as in the article Code snippets for querySelector.

Selectors

The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (p) elements in a document whose CSS class is either warning or note, you can do the following:

var special = document.querySelectorAll( "p.warning, p.note" );

You can also query by ID. For example:

var el = document.querySelector( "#main, #basic, #exclamation" );

After executing the above code, el contains the first element in the document whose ID is one of main, basic, or exclamation.

You may use any CSS selectors with the querySelector() and querySelectorAll() methods.

See also

Etiquetas do documento e colaboradores

 Colaboradores desta página: teoli, Jeremie, Sheppy, ethertank, Philip Chee, mcsi, asadotzler
 Última atualização por: Jeremie,