querySelector

< css
Jump to: navigation, search

querySelector



Summary

Returns the first element that matches the provided selector.

Method of dom/Element

Syntax

var element = element.querySelector(selectors);

Parameters

selectors

Data-type: String


A selector, or multiple selectors (separated by commas).

Return Value

Returns an object of type DOM Node.

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

Examples

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

<!doctype html>
<html>
<!-- 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>

Notes

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, :focus, 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. Calling this method with an unknown selector (due to the browser not implementing it, or due to typo and such) may throw an exception.


Related specifications

Specification Status Related Changes
Selectors API Level 1 Proposed Recommendation Section 6.1

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1
3.5
8
10
3.1

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.1
7.0
16
1
9
10
5.0
3.2


Compatibility notes

Browser Version Note
Any Any The returned elements will only match selector strings that the running browser supports. Look at any individual selector for compatibility information. Some advanced selector may cause the call to throw an exception, due to syntax errors.

See also

Related articles

Selectors


  • querySelector

















































… further results


Related pages (MSDN)

  • Document
  • 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
  • Reference
  • querySelectorAll
  • Other Resources
  • [W3C Selectors API]
  • [W3C Selectors]

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]