JS Queryselector () use Method _ Basics

Queryselector Definitions and usage

The Queryselector () method returns an element in the document that matches the specified CSS selector.
Note: the Queryselector () method simply returns the first element that matches the specified selector. If you need to return all the elements, use the Queryselectorall () method instead.

Browser support

The number in the table represents the version number of the first browser that supports the method.

Grammar
Document.queryselector (CSS selectors)

Parameter values

Parameters	type	Description
CSS Selector	String	Have to. A CSS selector that specifies one or more matching elements. You can use their IDs, classes, types, attributes, property values, and so on to select elements. For multiple selectors, separated by commas, returns a matching element.

Technical details

DOM version:	Selectors Level 1 Document Object
return value:	Matches the first element of the specified CSS selector. If not found, returns NULL. Throws a Syntax_err exception if an illegal selector is specified.

Instance

Gets the first element of the id= "demo" in the Document:

<p id= "Demo" >id= "demo" p elements </p>
<p id= "Demo" >id= "demo" p elements </p>
<p> Click on the button to modify the first id= "demo" p element content </p>
<button onclick= "MyFunction ()" > Dot i </button>
<script >
function MyFunction () {
 document.queryselector ("#demo"). InnerHTML = "Hello world!";
}
</script>

More examples

1. Get the first <p> element in the document:

<p> This is a p with element. </p>
<p> This is also a p with element. </p>
<p> Click the button to modify the background color of the first P element in the document. </p>
<button onclick= "MyFunction ()" > Point I </button>
<script>
function MyFunction () {
 document.queryselector ("P"). Style.backgroundcolor = "Red";
}
</script>

2. Get the first element of class= "example" in the document:

<H2 class= "Example" >class= "Example" of the title  
 

3. Get the first <p> element of class= "example" in the document:

<H2 class= "Example" >class= "Example" the title  
 

4. Get the first <a> element in the document that has the target attribute:

<! DOCTYPE html>
 
 

5. The following example demonstrates how to use multiple selectors.
Suppose you have selected two selectors: The following code adds a background color to the first

6, however, the,

7, through the content of the Select to achieve the URL jump

<select id= "Language-picker" >
<option value= "cs" >Česky</option>
<option value= "en" >English</option>
<option value= "es" >Español</option>
<option value= "FR" > français</option>
<option value= "JP" > Japanese language </option>
<option value= "PL" >polski</ option>
<option value= "PT" >Português</option>
<option value= "en" selected> China </ option>
</select>
<script>
 var lang = document.queryselector (' #language-picker ');
 Lang.addeventlistener (' Change ', function (e) {
 if (e.target.value = = = ' en ') {
  window.location = '/';
 } else {
  window.location = '/' + E.target.value;
 }
 });
</script>

Cloud Habitat Community Small series remind: because IE8 above version only supports Queryselector, please use as appropriate.