HTML DOM Element querySelector() هادما

Definition and usage

querySelector() The method returns the first child element that matches the specified CSS selector of the element.

Note:

querySelector() The method returns only the first element that matches the specified selector. To return all matches, please use querySelectorAll() method.

See also:

Reference manual:

classList attribute

className attribute

querySelectorAll() method

getElementsByTagName() method

getElementsByClassName() method

Obiyin Style HTML DOM

Tutorial:

CSS ɗanar ɗaukar

CSS ɗanar ɗanar

CSS ɗanar ɗanar ɗakar

Instance

Example 1

Change the text of the first child element with class="example" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Kaiwa shi shugabawa

More examples are provided below the page.

Syntax

element.querySelector(CSSselectors)

Parameters

Parameters Description
CSSselectors

Required. String. Specifies one or more CSS selectors to match elements.

CSS selectors are used to select HTML elements based on id, class, type, attributes, attribute values, etc.

For multiple selectors, please separate each selector with a comma.

The returned element depends on the first element found in the document (see the "More examples" below).

Tip:For a complete list of CSS selectors, please see our CSS ɗanar ɗanar ɗakar.

Technical details

Return value:

Matches the first element specified by the CSS selector.

If no matches are found, it returns null.

If the specified selector is invalid, it throws a SYNTAX_ERR exception.
DOM version: Selectors Level 1 Element Object

More examples

Example 2

Change the text of the first <p> element in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Kaiwa shi shugabawa

Example 3

Change the text of the first <p> element with class="example" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Kaiwa shi shugabawa

Example 4

Change the text of the element with id="demo" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Kaiwa shi shugabawa

Shirin 5

Kida bakwai <a> element na kwarin <div> da ke kida target a cikin kwayar wucin abin da ke kaiwa red.

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Kaiwa shi shugabawa

Shirin 6

Shirin na yau ke nuna hakanan kwarin da ke aiki.

Duba da kwarin da kwarin ke da: <h2> da <h3> element.

Kodun da za a yi amfani dashi domin kida bakwai <h2> element na <div> ke kaiwa:

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kaiwa shi shugabawa

Shirin 7

Amma, idan <h3> element na <div> ke kama a cikin <h2> element, <h3> element za a samu kwayar wucin abin da ke kaiwa red.

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kaiwa shi shugabawa

Kwarin na kawo cikashe

Dabi' na sunan da ke tabbin cikin tabbin da ke kawo cikashe na kwarin da ke kawo cikashe a cikin kwarin na farko na kwarin. Kwarin na kawo cikashe na kwarin ba za a samu risku ba.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Sayyari na

Tuturu CSS:CSS ɗanar ɗanar

Kwarin CSS:CSS ɗanar ɗanar ɗakar

Tuturu JavaScript:JavaScript HTML DOM Node List

Kwarin JavaScript:document.querySelector()

Kwarin JavaScript:element.querySelectorAll()

Kwarin HTML DOM:document.querySelectorAll()