How To Select Element In The DOM
In DOM introduction section we have seen how the DOM is structured as a tree of objects called nodes, and that node can be element, text or comment. We also get to know that we can modify DOM structure or can change any node but to modify something we must first select it.
In this section, we will come across multiple ways to select a node within the DOM.
Let us now discuss each and every method in detail.
getElementById() is the most popular and frequently used DOM method to select HTML elements since IDs are required to be unique so it is a powerful way to select a node within the document.
getElementById() method returns an element whose id is matched with the passed id value within the method.
const element = document.getElementById(ID);
To select the element, the "id" of the element is passed in the argument of the method.
If an element with a given id is present in the
document then it returns the element else it returns null.
Change the color.
In the above example first, we select the element using
getElementsByClassName() method is another way to select elements within the document. It returns an array of all the child elements which have given class name(s).
This method can be applied on a document or on any specific element of the document, when applied on any element like
<article>, etc then only child element of the element having given class name is returned, while when applied on the
document then all the elements with the given class name within the document is returned.
const elements = document.getElementsByClassName(names); or const elements = rootElement.getElementsByClassName(names);
Since this method returns all the elements with specified class names in the form of an array, you can access those elements by its index value in the array.
Getting all element with class name 'blue'.
Getting all element with both classes 'big' and 'blue'.
Getting all element that have class 'blue', inside an element that has the ID of 'color'.
getElementsByTagName() selects and returns all HTML elements with the given tag name in form of an array.
Note: The collection returned by the function is live HTMLCollection, means collection gets updated automatically with the DOM tree.
The method either can be used on the document itself or can be used on some element like
<div>, when applied on the document then all the element with given tag name is selected while when applied on some element then all its child element with a given name is selected but not itself.
const elements = document.getElementsByTagName(); or const elements = rootElement.getElementsByTagName();
If you want to make some change to all specific tags then it is useful.
querySelector() method is another method to select unique element from the document. This method selects the element on the basic of a valid CSS selectors string.
querySelector() method uses CSS selector string as argument to select the element. You can select all those elements that can be selected by CSS using CSS selector string.
const element = document.querySelector(selector);
- selector=".class1" - will select first element having this classname
- selector="#id1" - will select the first element with this id
- selector=".class1.class2" - will select first element having both the classes
- selector=".class1 .class2" - will select the first elements with class2 having a parent element with 'class1'
- selector="[input=text]" - will select the first elements with input type text
It returns the first element that matches the CSS selector string passes as an argument. If no matches are found then
null is returned.
Note: The CSS pseudo-elements will never return any elements
Working with more complex CSS selector for with
querySelectorAll() method is same as
querySelector() method. But instead of selecting only 1st element that matches the CSS selector
querySelectorAll selects all the element matching the string and return as a collection.
const elements = document.querySelectorAll();
Any valid CSS string can be used in this method.
If string matches then its return collection of HTML elements matching the string else return null.