.gif)
Note: This documentation is preliminary and is subject to change.
Returns the first Document Object Model (DOM) element node of the document that matches one of the supplied selector strings.
Syntax
pel = document.querySelector(v)
Parameters
| v |
Required.
The selector string.
|
Return Value
A DOM element node, or null.
Remarks
The document search order is depth-first,
pre-order traversal.
Internet Explorer will not callback
any function pointer provided to the API.
The second parameter to this function is ignored.
Supplying a second parameter generates a warning that the nsresolver parameter is not supported.
Selectors that contain
:visited or
:link are ignored and no elements are returned.
Internet Explorer does not support namespaces for this interface.
Namespaced elements can be searched using a selector syntax which searches based on prefix,
instead of the namespaceURI:
"nsPrefix \: element",
where "nsPrefix" is the prefix of a given element.
The pseudo-class selectors:
:hover
and
:active
are supported.
The scope of the search is global to the document.
This is in contrast to the
IElementSelector
methods, where the scope of the search is less than the entire document.
Selectors are described in detail in
W3C Selectors .gif)
.
Examples
Typcal usage.
<html>
<head>
<title>Simple Selectors API example</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
div {
display: block;
padding: 10px;
margin: 2px;
color: white;
border: 1px black solid;
}
.black { background-color: black; }
.blue { background-color: blue; }
.red { background-color: red; }
.green { background-color: green; }
</style>
</head>
<body>
<div class='black'>Black</div>
<div class='blue'>Blue</div>
<div class='red'>Change to Green</div>
<script>
// Find '.red'
var redblock = document.querySelector('.red');
// Change its class to green.
redblock.className = 'green';
Ignoring ":link"
// The "a:link" selector in this group of selectors will be ignored.
// The other selectors will continue to apply.
document.querySelectorAll("pie, a:link, .myClass");
Using the pseudo-class selectors:
:hover example.
// HTML section of the document (a fragment)
<body>
<p class="paragraph1">text...</p>
<p class="paragraph2">text...</p>
<p class="paragraph3">text...</p>
<p class="paragraph4">text...</p>
</body>
// Script fragment illustrating the querySelector API
var e = document.querySelector("p:hover");
// The previous API call will only return a paragraph when the user has
// a mouse or pointing device over a paragraph tag.
if (e)
{
// Execute some script on the paragraph under which the mouse is hovering...
}
Standards Information
This method is defined in
Selectors API (W3C Working Draft) .
Applies To
See Also
W3C Selectors API , W3C Selectors , querySelectorAll, IDocumentSelector, IElementSelector