Introduction
In JavaScript, the querySelector method is a built-in method of the Document and Element prototypes that is used to select an element from an HTML document based on its CSS selector. This method is often used to access specific elements in an HTML document, such as a button, a form, or a table, and to perform operations on those elements, such as changing their content, styles, or attributes.
This article explains the querySelector and querySelectorAll method and how to use them.
Using the querySelector method
Select element by element name
The querySelector method accepts a single argument: a string containing a CSS selector that specifies the element or elements that you want to select. This selector can be any valid CSS selector, such as an element name, an ID, a class name, or a combination of these. Here is an example of how to use the querySelector method to select an element from an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>Welcome to GoLinux</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis
expedita iure, non pariatur ratione amet atque odit accusamus quam,
officia velit sunt modi autem, sint eum voluptatum. Deserunt,
dolorum molestiae!
</p>
<button class="big">Click Here to Get Started</button>
<h2>Get all the info in your inbox</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dicta
enim architecto laborum earum nostrum. Voluptates repellendus
consectetur in cupiditate tenetur ex voluptatibus accusantium
repudiandae nemo, fugiat, inventore doloribus nostrum?
</p>
<button id="full">Subscribe to GoLinux</button>
</body>
<script>
let myButton = document.querySelector("button");
console.log(myButton);
</script>
</html>
Output
<button class="big">Click Here to Get Started</button>
In this example, the querySelector method is called on the document object, and it is passed a string containing the CSS selector for a button element. This selects the first button element in the document, and it returns the Element object representing that element. The result is then assigned to the myButton variable, and it is logged to the console.
Select element by class or id name
We can select the elements using the class or id by using the . and # characters with the class name or id name respectively. Here is an example where we select the elements with the big class and the full id and log the element to the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>Welcome to GoLinux</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis
expedita iure, non pariatur ratione amet atque odit accusamus quam,
officia velit sunt modi autem, sint eum voluptatum. Deserunt,
dolorum molestiae!
</p>
<button class="big">Click Here to Get Started</button>
<h2>Get all the info in your inbox</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dicta
enim architecto laborum earum nostrum. Voluptates repellendus
consectetur in cupiditate tenetur ex voluptatibus accusantium
repudiandae nemo, fugiat, inventore doloribus nostrum?
</p>
<button id="full">Subscribe to GoLinux</button>
</body>
<script>
let classButton = document.querySelector(".big");
let idButton = document.querySelector("#full");
console.log(classButton);
console.log(idButton);
</script>
</html>
Output
<button class="big">Click Here to Get Started</button>
<button id="full">Subscribe to GoLinux</button>
Using the querySelectorAll method
In addition to using the querySelector method to select a single element from an HTML document, you can also use the querySelectorAll method to select multiple elements that match a specified CSS selector. This method is similar to the querySelector method, but it returns a NodeList object containing all of the elements in the document that match the specified selector, rather than just the first matching element. Here is an example of how to use the querySelectorAll method to select multiple elements from the same HTML document as in the previous section:
<script>
let buttons = document.querySelectorAll("button");
console.log(buttons);
</script>
Output
NodeList(2)Â [button.big, button#full]
In this example, the querySelectorAll method is called on the document object, and it is passed a string containing the CSS selector for button elements. This selects all of the button elements in the document, and it returns a NodeList object containing these elements. The result is then assigned to the buttons variable, and it is logged to the console
Summary
The querySelector and querySelectorAll methods are built-in methods of the "Document" and Element prototypes in JavaScript that are used to select elements from an HTML document based on their CSS selector. These methods accept a single argument: a string containing a CSS selector that specifies the element or elements that you want to select.
The querySelector method returns the first element in the document that matches the specified selector, and the querySelectorAll method returns a NodeList object containing all of the elements in the document that match the specified selector. These methods are useful for accessing specific elements in an HTML document and for performing operations on those elements.
References
Document.querySelector() - Web APIs | MDN (mozilla.org)
Document.querySelectorAll() - Web APIs | MDN (mozilla.org)
