By Christina Daskalopoulou, May 2021 | Javascript
DOM manipulation is one of the most important skills for a web developer to acquire.
In this topic we will discuss the 4 most important methods that we can use to access DOM elements. And we will also address their differences as well as where we should use each one.
querySelector()
querySelectorAll()
getElementById()
getElementsByClassName()
So, Let’s say we have the following HTML structure:
<body>
<h1>Accessing DOM Elements</h1>
<div id="demo">This is my first demo div</div>
<div class="content">This is a div with some content</div>
<ul>
<li class="list-item">First List Item</li>
<li class="list-item">Second List Item</li>
<li class="list-item">Third List Item</li>
<li class="list-item">Fourth List Item</li>
</ul>
</body>Javascript | First Method: querySelector()
The querySelector() method returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
const myDiv = document.querySelector(‘#demo’);
console.log( myDiv );
Output:
<div id=”demo”>This is my first demo div</div>
Javascript| Second Method: querySelectorAll()
The querySelectorAll() method returns a static NodeList, like an array, representing a list of the document’s elements that match the specified group of selectors.
const myList = document.querySelectorAll(‘.list-item’)
console.log( myList );
Output:
NodeList(4) [li.list-item, li.list-item, li.list-item, li.list-item]
Javascript | Third Method: getElementById()
The getElementById() method returns an Element object representing the element whose id property matches the specified string.
const myDemo = document.getElementById(‘demo’);
console.log( myDemo );
Output:
<div id=”demo”>This is my first demo div</div>
Fourth Method: getElementsByClassName()
The getElementsByClassName() method returns an array-like object of all child elements which have all of the given class name(s).
const myListAgain = document.getElementsByClassName(‘list-item’);
console.log( myListAgain );
Output:
HTMLCollection(4) [li.list-item, li.list-item, li.list-item, li.list-item]
And as you can see querySelector() and getElementById() methods return one element whereas the querySelectorAll() and getElementByClassName() return a list (array-like object) of elements.
Similarly, querySelectorAll() and getElementsByClassName() return an array they have a big difference. Since they are both acting like an array we can use the for() loop to iterate through the elements of the array. However only in querySelectorAll() we can also use the forEach() method to access each element.
myList.forEach((item) => {
item.style.backgroundColor = “lightgray”;
});
for (let i = 0; i <= myListAgain.length; i++) {
myListAgain[i].style.border = “1px solid orange”;
}
However, Another option is to convert the nodelist to an array using the Array.from() method. Thus we will then have access to all the methods that are applied to arrays.
Here is a Codesandbox with the code.
Christina Daskalopoulou, May 2021
References and Sources
Recent Comments