Can we access multiple DOM elements at the same time?


#1

Question

Can we access multiple DOM elements at the same time?

Answer

Absolutely! We can access multiple DOM elements at the same time using the .getElementsByTagName(), .getElementsByClassName(), and the .querySelectorAll() methods.

Here’s the syntax and how to use each of these methods:
.getElementsByTagName():

  • Syntax: element.getElementsByTagName('tagName')
    • where element is the starting point for the search, not including the element itself; can be the document object
    • the s on Elements (get Elements ByTagName) is important, as this method will return a collection of elements that match the tagName
    • tagName will be a type /element selector like in CSS, for example if we want to select all <div> elements tagName will be div
    • Note: as this method returns a collection, the collection will need to be looped over to access and modify the elements returned from the method
  • Example usage:
    JS:
// In the following line, a collection of `div` nodes will be returned to the variable `selectByTagElements`
const selectByTagElements = document.body.getElementsByTagName('div');

// The following loop will loop over the collection of `div` nodes and will log the inner HTML of each node
for (let i = 0; i < selectByTagElements.length; i++) { 
    console.log(selectByTagElements[i].innerHTML);
}

.getElementsByClassName():

  • Syntax: element.getElementsByClassName('className')
    • where element is the starting point for the search, not including the element itself; can be the document object
    • the s on Elements (get Elements ByClassName) is important, as this method returns an array-like object of all child elements that match the className
    • className will be a class selector like in CSS, but without the period in front, for example if we want to select all elements with a class="class-name" attribute, the className will be class-name
    • Note: as this method returns an array-like object, we will need to loop over the array-like object to access/modify the elements returned from .getElementsByClassName()
  • Example usage:
    JS:
// The following line will assign the variable `selectByClassNameElements` to an array-like object of elements that match the `class-name` selector
const selectByClassNameElements = document.getElementsByClassName('class-name');

// The following will loop over the array-like object, change each element's inner HTML to `Hello World` + the element's index + `!`
for (let i = 0; i < selectByClassNameElements.length; i++) {
    selectByClassNameElements[i].innerHTML = `Hello World ${[i]}!`;
    console.log(selectByClassNameElements[i].innerHTML);
}

.querySelectorAll():

  • Syntax: elementNodeList = parentNodeElement.querySelectorAll(selector);
    • where elementNodeList is a variable where we would like to store the returned list of element nodes
    • parentNodeElement is where we would like to start the search; can be the document object
    • selector will be the same syntax as CSS selectors (.class, #id, etc) and can have multiple comma separated selectors (like CSS group selectors)
    • Note: as this method returns a list of nodes, we will need to loop over the list to access/modify the elements returned from .querySelectorAll()
  • Example usage:
    JS:
// The following line will assign the variable `elementNodeList` to the node list of returned elements that match the 'h1, .my-class, #my-id' group selector
const elementNodeList = document.querySelectorAll('h1, .my-class, #my-id');

// The following loop will loop through the list of nodes returned to `elementNodeList` and will change the color property of each node to red
for (let i = 0; i < elementNodeList.length; i++) {
    elementNodeList[i].style.color = 'red';
}
  • Warning: as these methods do not return a normal Array object, you cannot use normal Array methods like .map(), .filter(), .forEach(), etc.