Get HTML elements by CSS Selector
Users can select the HTML elements using the different CSS selectors such as class, id, and tag name at a single time. HTML elements can be retrieved using CSS selectors in two ways. The querySelector() method returns the first element that matches the particular CSS selector. The querySelectorAll() method returns all element that matches the particular CSS selector.
To use id/class as a parameter users have to add the ‘#‘/’.‘ sign before it. Users can pass directly the tag name into the above 2 methods. Users don’t need to separate CSS selectors when passing multiple CSS selectors as parameters.
Syntax:
document.querySelector(selectors);
document.querySelectorAll(selectors);
Parameter:
As a parameter, it accepts different CSS selectors such as class, tag name, and id.
Return value:
The querySelector() method returns the first object that matches the CSS selectors, while the querySelectorAll() method returns a collection of all objects that match the CSS selectors.
Example 1: This example demonstrates the use of the querySelector method. In the below, code we have used the different CSS selectors to access the HTML elements from the DOM.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- html element with classnames and id --> <h1 class="gfg1" id="g1">w3wiki sample 1</h1> <h1 class="gfg1" id="g2">w3wiki sample 2</h1> <p class="gfg1">w3wiki sample 3</p> <script> // Accessing the element by class name // using querySelector let temp = document.querySelector(".gfg1"); console.log(temp); // Accessing the element by id using querySelector temp = document.querySelector("#g2"); console.log(temp); // Accessing the element by class name and // id using querySelector temp = document.querySelector(".gfg1#g2"); console.log(temp); // Accessing the element by tag name that // includes the particular class temp = document.querySelector("p.gfg1"); console.log(temp); </script></body></html> |
Output:
Example 2: This example demonstrates the use of the querySelectorAll method. The querySelectorAll() method returns the node list of all objects that match with the CSS selectors. Users can access all elements of the CSS node list using the index that starts from 0.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- html element with classnames and id --> <h1 class="gfg1" id="g1">w3wiki sample 1</h1> <h1 class="gfg1" id="g2">w3wiki sample 2</h1> <p class="gfg1">w3wiki sample 3</p> <p class="gfg1">w3wiki sample 4</p> <script> // Accessing the element by class name, id and // tag name using querySelectorAll let temp = document.querySelectorAll("h1.gfg1#g2"); console.log(temp[0]); // Accessing the element by tag name using // querySelectorAll temp = document.querySelectorAll("p"); console.log(temp[0]); console.log(temp[1]); </script></body></html> |
Output:
Different ways to access HTML elements using JavaScript
Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Document Object Model). Here, the DOM is the structure of the web page.
From the DOM, users can access HTML elements in five different ways in JavaScript:
Table of Content
- Get HTML element by Id
- Get HTML element by className
- Get HTML element by Name
- Get HTML elements by TagName
- Get HTML elements by CSS Selector