Top 5 JavaScript Methods for Accessing Elements in the DOM
For beginner JavaScript coders, one of the first skills you will need to have when starting to build out projects of your own is DOM manipulation. And step one of that? Finding the elements you want to manipulate. Here, I’m going to break down different ways you can find an access HTML elements.
Let’s say that this is our simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 class="bold" id="title">Learning How to Select This Element</h1>
<h1 class="bold" id="title-2">Sometimes We Will Select This One Too</h1>
<h1>Or This One</h1>
</body>
</html>I’m going to show you multiple ways to access one, some, or all of the <h1> elements in the body of the document.
document.getElementById()
The getElementById() method looks through the HTML document and finds the element that has an ID that matches (remember, IDs can only be assigned to one element, so this method will never return more than one element). So in the example above, we would simply put the ID assigned to that element in quotations as the argument for the method.
document.getElementById('title')This would return only the first <h1> element, because that is the only one with a matching ID.
<h1 class="bold" id="title">Learning How to Select This Element</h1>document.getElementsByClassName()
This method is similar to the one above, but instead finds all of the elements that have the same class name. In the example we’re working with, let’s grab the first two <h1> elements.
document.getElementsByClassName('bold')Because the third element doesn’t have the class name it will not be selected, but the other two will be returned as a collection that you can iterate over and manipulate as you please!
document.getElementsByTagName()
This is the method we would use if we wanted to get all of the <h1> tags out of a document.
document.getElementsByTagName('h1')With our example above, this method returns a collection of all three of those <h1> tags.
document.querySelector()
The querySelector() method uses a CSS selector as an argument and finds the first element that matches. Let’s say you want to grab that first <h1> element again. Simply add that as an argument:
document.querySelector('h1')Because this method uses CSS selectors, you aren’t limited to just the HTML tag names. You can use class names, ID names, and even some sort of combination. So, let’s say this time we wanted to grab only the second <h1> element:
document.querySelector('#title-2')That does the trick!
document.querySelectorAll()
Like the method above, querySelectorAll() uses CSS selectors as arguments, but this time instead of just selecting the first element that matches, it returns a list of all of the elements that match. So if you wanted to manipulate all of your <h1> elements, the easiest way to do so would be through this method.
document.querySelectorAll('h1')Like some of the other methods, this one will return a collection of all three of those <h1> elements.
Aaaand that’s all folks! These 5 methods will guide you throughout your vanilla JavaScript journey. Next steps would be assigning that returned element to a variable, and then adding event listeners to those individual DOM elements. Happy coding!
