# querySelector() ### Introduction to JavaScript querySelector() and querySelectorAll() methods The `querySelector()` is a method of the `Element` interface. The `querySelector()` method allows you to select the first element that matches one or more CSS selectors. The following illustrates the syntax of the `querySelector()` method: ```javascript let element = parentNode.querySelector(selector);Code language: JavaScript (javascript) ``` In this syntax, the `selector` is a CSS selector or a group of CSS selectors to match the descendant elements of the `parentNode`. If the `selector` is not valid CSS syntax, the method will raise a `SyntaxError` exception. If no element matches the CSS selectors, the `querySelector()` returns `null`. The `querySelector()` method is available on the `document` object or any `Element` object. Besides the `querySelector()`, you can use the `querySelectorAll()` method to select all elements that match a CSS selector or a group of CSS selectors: ```javascript let elementList = parentNode.querySelectorAll(selector);Code language: JavaScript (javascript) ``` The `querySelectorAll()` method returns a static `NodeList` of elements that match the CSS selector. If no element matches, it returns an empty `NodeList`. Note that the `NodeList` is an array-like object, not an array object. However, in modern web browsers, you can use the [`forEach()`](https://www.javascripttutorial.net/javascript-array-foreach/) method or the [`for...of`](https://www.javascripttutorial.net/es6/javascript-for-of/) loop. To convert the `NodeList` to an array, you use the `Array.from()` method like this: ```javascript let nodeList = document.querySelectorAll(selector); let elements = Array.from(nodeList);Code language: JavaScript (javascript) ``` ### Basic selectors Suppose that you have the following HTML document: ```xml querySelector() Demo

Welcome to the JS Dev Agency

UI/UX

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima. Adipisci, obcaecati repellat.

PWA Development

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure provident labore nihil in earum.

Mobile App Dev

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea! Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit laborum debitis eos?

Code language: HTML, XML (xml) ``` #### 1) Universal selector The universal selector is denoted by `*` that matches all elements of any type: ``` * ``` The following example uses the `querySelector()` selects the first element in the document: ```javascript let element = document.querySelector('*');Code language: JavaScript (javascript) ``` And this select all elements in the document: ```javascript let elements = document.querySelectorAll('*');Code language: JavaScript (javascript) ``` #### 2) Type selector To select elements by node name, you use the type selector e.g., `a` selects all `` elements: ``` elementName ``` The following example finds the first `h1` element in the document: ```javascript let firstHeading = document.querySelector('h1');Code language: JavaScript (javascript) ``` And the following example finds all `h2` elements: ```javascript let heading2 = document.querySelectorAll('h2');Code language: JavaScript (javascript) ``` #### 3) Class selector To find the element with a given CSS class, you use the class selector syntax: ```css .classNameCode language: CSS (css) ``` The following example finds the first element with the `menu-item` class: ```javascript let note = document.querySelector('.menu-item');Code language: JavaScript (javascript) ``` And the following example finds all elements with the `menu` class: ```javascript let notes = document.querySelectorAll('.menu-item');Code language: JavaScript (javascript) ``` #### 4) ID Selector To select an element based on the value of its id, you use the id selector syntax: ```css #idCode language: CSS (css) ``` The following example finds the first element with the id `#logo`: ```javascript let logo = document.querySelector('#logo');Code language: JavaScript (javascript) ``` Since the `id` should be unique in the document, the `querySelectorAll()` is not relevant. #### 5) Attribute selector To select all elements that have a given attribute, you use one of the following attribute selector syntaxes: ```json [attribute] [attribute=value] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*$*=value] Code language: JSON / JSON with Comments (json) ``` The following example finds the first element with the attribute `[autoplay]` with any value: ```javascript let autoplay = document.querySelector('[autoplay]');Code language: JavaScript (javascript) ``` And the following example finds all elements that have `[autoplay]` attribute with any value: ```javascript let autoplays = document.querySelectorAll('[autoplay]');Code language: JavaScript (javascript) ``` ### Grouping selectors To group multiple selectors, you use the following syntax: ``` selector, selector, ... ``` The selector list will match any element with one of the selectors in the group. The following example finds all `
` and `

` elements: ```javascript let elements = document.querySelectorAll('div, p');Code language: JavaScript (javascript) ``` ### Combinators #### 1) descendant combinator To find descendants of a node, you use the space ( ) descendant combinator syntax: ``` selector selector ``` For example `p a` will match all `` elements inside the `p` element: ```javascript let links = document.querySelector('p a');Code language: JavaScript (javascript) ``` #### 2) Child combinator The `>` child combinator finds all elements that are direct children of the first element: ``` selector > selector ``` The following example finds all `li` elements that are directly inside a `