Selecting Elements in the DOM With Javascript

Andrew Mullan
Oct 13, 2020 · 5 min read

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:

Returns the form element and its inner elements.

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:

Returns a collection of all elements that have the given class name.

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')
Returns all elements on the page that are the supplied tag.

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:

Use the key of the id on the HTMLCollection to get the specific element of that id.

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.

Returns the first input tag with type=’submit’.
Returns the first li with class=’pretty-text’
Return all input tags under the element with id=’selector-form’.

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:

Returns all of the divs on the page without the id key in .getElementsByTagName.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Andrew Mullan

Written by

Current Web Development student at https://flatironschool.com/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store