querySelector Method (document)

querySelector Method

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 .

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...
}

Applies To

document