![How to use JavaScript querySelector()? [SOLVED]](/javascript-queryselector/javascript-queryselector.jpg)
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)
