JavaScript: Finding HTML DOM Elements
getElementById() vs. querySelector()
Hello! Welcome to my very first blog post comparing and contrasting JavaScript’s HTML element finding methods. Speaking from experience, I have struggled to understand the core differences between getElementById() vs querySelector() as well as when to use which. So in today’s blog, I will first explain the importance of such methods before diving into more specific advantages and disadvantages.
Importance of Accessing HTML DOM Elements
HTML elements are the building blocks of HTML pages. Often, with JavaScript, you want to manipulate these HTML elements for a variety of reasons. For example, you want your HTML page to be more interactive so you’ve implemented event listeners attached to buttons or text that upon user action, shows different pieces of information. An example of an interactive page would be a basic Harry Potter Database that I’ve worked on using API fetch requests. For more information on my project, feel free to scroll down to the extras section below.
As you can see the page loads new member information upon user click on different Houses as well as each member’s additional personal information upon further clicking into. This is an interactive page utilizing event listeners to display new information upon user interaction with the site. The first step to creating more advanced websites is to understand how to communicate with the DOM and manipulate HTML elements.
To manipulate HTML elements, you have to find the elements first. A couple of ways to do this could be finding HTML elements by id, tag name, class name, CSS selectors, and by HTML object collections.
What is the querySelector() method?
JavaScript’s querySelector() method allows the user to retrieve an element from the DOM or HTML web page using a CSS (Cascading Style Sheets) selector. This method is very versatile because it allows you to select any element from a web page. By using querySelector, the user does not need to worry about only being allowed to select elements by class or IDs. An example of querySelector syntax for getting different elements will be shown below.
document.querySelector(‘p’) // searches for a paragraph tag name document.querySelector(‘.some-class’) // searches for a specific class document.querySelector(‘#some-id’) // searches for a specific ID
It is important to note the the querySelector method returns the first instance of the input it’s given to search for. There is also a querySelectorAll() method that would retrieve all elements that match the inputted tag, class or id.
What is the getElementById() method?
JavaScript’s getElementById() method retrieves an element based on its ID attribute. This method can only retrieve one element from the web page based on its particular ID. This is due to the fact that HTML IDs must be unique, meaning there can’t be multiple elements with the same ID. However, a downside to this method is that it’s much more restrictive then querySelector and can only access elements via their ID. An example of getElementById syntax will be shown below.
document.getElementbyId(‘some-id’) // searches for a specific ID
If the element is not found, the method will return null.
Conclusion
You need to pick the appropriate method for any given task. Both getElementById() and querySelector() methods have their own advantages and disadvantages and therefore neither are “better” than the other. The querySelector() method will go through your entire HTML file, letting you find elements that normally can’t be expressed by getElementById(). However, getElementById() is better supported and more reliable than querySelector(). This because querySelector() is a newer feature and therefore more susceptible to having potential bugs.
Get Leo Chen’s stories in your inbox
Join Medium for free to get updates from this writer.
The querySelector method lets you retrieve an element using a CSS selector query. The getElementById method retrieves an element by its DOM ID. You should opt to use the querySelector method to select elements with complex rules that can be represented using a CSS selector.
Other Methods
A couple of other useful methods to consider for finding elements:
document.getElementsbyTagName(‘p’) // searches for a paragraph tag name document.getElementsbyClassName(‘some-class’) // searches for a specific class
Examples
If given an HTML file:
<div>
<div class="banner">
<h1>Hello!</h1>
</div> <div>
<h5 id="greeting">Greetings!</h5>
</div> <div class="banner">
<h2>header2?</h2>
</div>
<div class="outro">
<h1>Goodbye</h1>
</div>
</div>
The JavaScript method discussed in this blog will return:
document.querySelector('h1');
// returns first element with <h1> tagdocument.querySelector('.banner');
// returns the first element with class="banner"document.querySelector('#greeting');
// returns the first element with id="greeting"document.getElementbyId('greeting');
// returns the same as above methoddocument.getElementsbyTagName('h1');
// returns all elements with <h1> tagsdocument.getElementsbyClassName('banner');
// returns all elements with class="banner"document.querySelectorAll('.banner');
// returns the same as above method
Extras
In this section I will explain how the getElementById() method helped me with my project.
The HTML code for filling out each character’s personal information:
The JavaScript portion of the code had a function that would access the HTML elements corresponding to the proper element ID and then assign the text content with the character’s personal information fetched from a public API. This functionality was accomplished using the getElementById method:
