JavaScript querySelector() Method Tutorial

In this section, we will learn what the querySelector() method is and how to use it in JavaScript.

What is Element querySelector() Method in JavaScript?

The JavaScript Element querySelector() method is used to select a child in an Element and bring a reference of that child into JavaScript using CSS Selectors.

Note: this method only returns the first child that matched the specified CSS selector that was set as the argument of the method.

JavaScript querySelector() Method Syntax:

element.querySelector(CSS-Selector);

JavaScript querySelector() Method Parameter

The method takes one argument, and that is the query selector that we specify using CSS Selectors.

JavaScript querySelector() Method Return Value

The return value of this method is a reference to the first child that matched the specified query in the target element (the one that invoked this method).

Note: the method might return the value null if no match was found for the defined query.

Example: using querySelector() method in JavaScript

See the Pen using querySelector() method in JavaScript by Omid Dehghan (@odchan1) on CodePen.

More to Read

JavaScript Element querySelectorAll() Method

Leave a Reply