Methods


querySelector Method
New for Windows Internet Explorer 8

Retrieves the first Document Object Model (DOM) element node from descendants of the starting element node that match any selector within the supplied selector string.

Syntax

pel = object.querySelector(v)

Parameters

v Required. The selector string.

Return Value

A DOM element node, or null if the search cannot find an element that matches the selector string.

Remarks

The document search order is depth-first. This method returns the first element found. To find all matching nodes, use querySelectorAll.

The scope of the returned element node is limited to the descendants of the starting element node. If the starting element is document, the search returns nodes from the entire document.

This method does not return the starting element node. For example, div.querySelector("p div") will never return the DIV element that it starts with.

The pseudo-class selectors :hover and :active are supported. Selectors that contain :visited or :link are ignored and no elements are returned.

You can search namespaced elements using a selector syntax based on prefix instead of the namespaceURI, for example "nsPrefix \: element", where "nsPrefix" is the prefix of a given element.

Selectors are described in detail in Understanding CSS Selectors and W3C Selectors World Wide Web link.

Example

This example illustrates how the selectors in the selector string are scoped to the entire document. The variable e contains the span even though the provided selector references the P element, which is outside the scope of the starting DIV element. 

<html>  
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- To limit the search to descendants of an element only, -->
<!-- call the selectors API on the specific element of interest. -->
<body>   
    <p>    
        <div id="apple">     
        <span>Some are sauce, some are pie.</span>    
        </div>   
    </p>   
<script>    
    var div = document.getElementById("apple");    
    var   e = div.querySelector("p span");    // 'e' will select the span.    
    var   f = div.querySelector("p div");     // 'f' will be null because the div is not a descendent of 'div'
</script>  
</body> 
</html>

Standards Information

This method is defined in Selectors API (W3C Working Draft) World Wide Web link.

Applies To

document, HTMLDocument Constructor, A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, Element Constructor

See Also

Tags :


Page view tracker