DEV Community

Gayathri.R
Gayathri.R

Posted on

Query selector in javascript

The querySelector() method i``n JavaScript is a powerful tool for selecting and manipulating elements within an HTML document, often referred to as the Document Object Model (DOM).

Description

The querySelector() method returns the first element that matches a CSS selector.

To return all matches (not only the first), use the querySelectorAll() instead.

Both querySelector() and querySelectorAll() throw a SYNTAX_ERR exception if the selector(s) is invalid

Syntax
document.querySelector(CSS selectors)

Change the text of the element with id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";

Get the first

element in with class="example":
document.querySelector("p.example");

Select the first

element with the parent is a

element.

document.querySelector("div > p");

Select the first

or the first

:

A h3 element

A h4 element

document.querySelector("h3, h4").style.backgroundColor = "red";

Top comments (0)