Selecting Elements in the DOM With Javascript
As your webpage grows in size, it may become more difficult to grab the elements you’d like to edit. Javascript gives you multiple powerful tools to select the items you’re looking for, but it can be confusing on which one to use. In this blog I will go over a few that I’ve learned and where I’ve found them most applicable.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Javascript DOM Element Selectors</title>
<script defer src="./src/index.js"></script>
</head>
<body>
<h1>DOM Selectors I Have Learned</h1>
<div id='learned-selectors'>
<ul>
<li class='pretty-text'>document.getElementById()</li>
<li class='pretty-text'>document.getElementsByClassName()</li>
<li class='pretty-text'>document.getElementsByTagName()</li>
<li class='pretty-text'>document.querySelector()</li>
<li class='pretty-text'>document.querySelectorAll()</li>
</ul>
</div> <div>
<h4 class='pretty-text'>Add A Selector You Have Learned</h4>
<form id='selector-form'>
<input type="text" name="name" placeholder="selector name" value="" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
document.getElementById()
When attempting to find a single element on the page, the method I’ve found to be the most effective is document.getElementById(). To utilize this method we will need the content you are searching for to have an id, so when creating content on your page try to set ids whenever possible. To use this method, simply include the id of the element you wish to grab as a parameter for the method. For example, to select the form in the above sample html above, use the following:
document.getElementByID('selector-form')This will return the entire form element from the page:
Because each id should only be used once per page, this method will only return one element which has the supplied id. If for some reason you accidentally gave two elements the same id, this method will return the first one from top to bottom.
document.getElementsByClassName()
If you would like to select multiple elements that all share the same class, document.getElementsByClassName() is the method you’ll want to use. In the html sample above the list items and the h4 above the form all have the class ‘pretty-text’. This class can be passed to the method as seen below:
document.getElementsByClassName('pretty-text')The output of the above is as follows:
Please note, what received back is not an array but an HTMLCollection. Similar to an array, you could call:
document.getElementsByClassName('pretty-text')[5]to get back the h4, however array methods such as .forEach will not work. To loop through this collection, you will first have to convert it to an array or use a counter and a for loop with its .length property.
const prettyTextElements = document.getElementsByClassName('pretty-text');// converting to an array
Array.from(prettyTextElements).forEach(function(element){
// access each element as element
})// looping over each element using a counter
for (i=0; i < prettyTextElements.length; i++) {
// access each element as prettyTextElements[i]
}
document.getElementsByTagName()
If you want to get all elements by their tag name, you can use the method document.getElementsByTagName(). In the sample html code we have a div wrapped around the list and a div wrapped around the form. To get these two divs along with their inner html we would pass the method the tag name ‘div’:
document.getElementsByTagName('div')
Similarly to the document.getElementsByClassName() method, this method also returns an HTMLCollection and not an array. Notice that it also added a key to the collection for the id that it found on one of the divs (‘learned-selectors’). This can allow us to select the specific div in the returned collection by its id by accessing the key of the collection:
While it may be easier to use document.getElementById() when you already know an element with that id exists, this can also be useful if checking if a given id exists under an expected tag.
document.querySelector() & document.querySelectorAll()
The two remaining selectors are document.querySelector() and document.querySelectorAll(). Both have the same use, however as the names suggest, .querySelector() returns only one (the first) element found and .querySelectorAll() returns all elements. These methods take in CSS selectors as parameters which allow you to utilize tag names, ids, class names or combinations of those along with other added functionality. I have displayed a few examples below, but please reference the CSS selector documentation to see all of the possibilities of these very customizable methods.
You may have noticed in the .querySelectorAll example above the object returned is a NodeList. This is similar to an HTMLCollection though not exactly the same. One difference can be seen when requesting the divs of the page. We will get the same elements as when we used .getElementsByTagName, however we no longer have the added key of the ‘learned-selectors’ included in the HTMLCollection:
Resources
