published: 29 Mar 2022
2 min read
How to get DOM elements using JavaScript
The Document Object Model (DOM) is a programming interface for HTML and XML documents created by the browser once the document is loaded. A web page is basically a document represented by the DOM as nodes and objects. It allows programs to manipulate the document's content, structure, and styles.
In this tutorial, we shall learn how to use JavaScript to access different nodes (HTML elements) in the DOM. Let us start with the first method: getting an element by ID.
Get Element By ID
The document
's getElementById()
method takes the element ID as input and returns an Element
object representing the DOM element. Here is an example:
<div id='unicorn'>🦄</div>
Now here is how we can get the above <div>
element by using its ID:
const unicorn = document.getElementById('unicorn')
The ID is case-sensitive and unique across the entire HTML document. So this method always returns a single element. If no matching element is found, it returns null
.
Note: Do not put the
#
sign before the ID string while callinggetElementById()
method. You will getnull
instead of the element, and then you might wonder for hours what has gone wrong.
Get Elements By Tag Name
The getElementsByTagName()
method is used to access multiple elements. It takes the tag name as input and returns all of the DOM elements that match the tag name as HTMLCollection
:
<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>
JavaScript code to access all <p>
elements:
const animals = document.getElementsByTagName('p')
This method searches only one tag name at a time. But if you pass in *
as the tag name, you will get all elements in the DOM:
const allNodes = document.getElementsByTagName('*')
Get Elements By Name
The getElementsByName()
method is used to get a collection of elements by their name
attribute, and returns a NodeList object:
<input type='text' name='email'>
<input type='tel' name='phone'>
<input type='date' name='dob'>
Let us get all the elements with the name email
:
const emails = document.getElementsByName('email')
Note: Unlike the
id
attribute, which must be unique, multiple HTML elements can have the samename
attribute. That's whygetElementsByName()
returns a collection of nodes.
Get Elements By Class Name
Want to use the class
attribute to get a list of matching elements? You can use getElementsByClassName()
method, just pass it a class name (without .
) and it will return an HTMLCollection
of all DOM elements that have the given class name:
<div>🦉</div>
<div>🐦</div>
<div>🦅</div>
<div>🐱</div>
Let us get all the birds:
const birds = document.getElementsByClassName('bird')
This method also accepts multiple class names separated by spaces. Let us get all elements that have both the bird
and eagle
classes:
const eagle = document.getElementsByClassName('bird eagle')
Query Selector
The querySelector()
method is one of the two modern JavaScript methods that allow you to get elements from DOM based on CSS selectors. Just pass in the CSS selector, and you will get the first element that matches the specified selector. If no matches exist, it returns null
. Here is an example:
const email = document.querySelector('#signup input[name='email']')
Query Selector All
Want to select a list of elements that match the specified selectors? Use querySelectorAll()
method instead. This method takes multiple CSS selectors as input and returns a NodeList, a list of DOM elements that match the given selectors. Let us select all elements with a class of either bird
or animal
from the above HTML markup:
const elems = document.querySelectorAll('.bird, .animal')
console.log(elems.length) // 4
Function Chaining
You can also chain multiple functions together to search elements within another element. You first need to select a single element using either getElementById()
or querySelector()
, and then chain another function to search within:
<form id='signup'>
<input type='text' name='email'>
<input type='tel' name='phone'>
<input type='date' name='date-of-birth'>
</form>
Get all input
elements inside of an element that has the ID signup
:
const inputs = document.getElementById('signup').getElementsByTagName('input')
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input')
Traversing HTMLCollection
and NodeList
Most of the methods we discussed above (except getElementById()
and querySelector()
) returns multiple elements as either an HTMLCollection
or a NodeList
.
The HTMLCollection
is not an array but a generic collection of elements. So it is impossible to iterate over it with the forEach()
or map()
method. However, we can convert it to a real array and then iterate using the Array.from()
method:
const inputs = document.getElementById('signup').getElementsByTagName('input')
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
console.log(element)
})
Although NodeList
is also not an array, it does provide the forEach()
method to iterate over the elements:
const inputs = document.querySelector('#signup').querySelectorAll('input')
//iterate over NodeList
inputs.forEach(element => {
console.log(element)
})
Conclusion
That's all for getting DOM elements using JavaScript. We have learned about many different methods to access the DOM elements: using the id
attribute, HTML tag name, name
attribute, class
attribute, and CSS selectors. We also discussed ways to iterate over the generic collection of elements returned by these methods.
Are we missing something? Help us improve this article. Reach out to us.
How to get DOM elements using JavaScript
The Document Object Model (DOM) is a programming interface for HTML and XML documents created by the browser once the document is loaded. A web page is basically a document represented by the DOM as nodes and objects. It allows programs to manipulate the document's content, structure, and styles.
In this tutorial, we shall learn how to use JavaScript to access different nodes (HTML elements) in the DOM. Let us start with the first method: getting an element by ID.
Get Element By ID
The document
's getElementById()
method takes the element ID as input and returns an Element
object representing the DOM element. Here is an example:
<div id='unicorn'>🦄</div>
Now here is how we can get the above <div>
element by using its ID:
const unicorn = document.getElementById('unicorn')
The ID is case-sensitive and unique across the entire HTML document. So this method always returns a single element. If no matching element is found, it returns null
.
Note: Do not put the
#
sign before the ID string while callinggetElementById()
method. You will getnull
instead of the element, and then you might wonder for hours what has gone wrong.
Get Elements By Tag Name
The getElementsByTagName()
method is used to access multiple elements. It takes the tag name as input and returns all of the DOM elements that match the tag name as HTMLCollection
:
<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>
JavaScript code to access all <p>
elements:
const animals = document.getElementsByTagName('p')
This method searches only one tag name at a time. But if you pass in *
as the tag name, you will get all elements in the DOM:
const allNodes = document.getElementsByTagName('*')
Get Elements By Name
The getElementsByName()
method is used to get a collection of elements by their name
attribute, and returns a NodeList object:
<input type='text' name='email'>
<input type='tel' name='phone'>
<input type='date' name='dob'>
Let us get all the elements with the name email
:
const emails = document.getElementsByName('email')
Note: Unlike the
id
attribute, which must be unique, multiple HTML elements can have the samename
attribute. That's whygetElementsByName()
returns a collection of nodes.
Get Elements By Class Name
Want to use the class
attribute to get a list of matching elements? You can use getElementsByClassName()
method, just pass it a class name (without .
) and it will return an HTMLCollection
of all DOM elements that have the given class name:
<div>🦉</div>
<div>🐦</div>
<div>🦅</div>
<div>🐱</div>
Let us get all the birds:
const birds = document.getElementsByClassName('bird')
This method also accepts multiple class names separated by spaces. Let us get all elements that have both the bird
and eagle
classes:
const eagle = document.getElementsByClassName('bird eagle')
Query Selector
The querySelector()
method is one of the two modern JavaScript methods that allow you to get elements from DOM based on CSS selectors. Just pass in the CSS selector, and you will get the first element that matches the specified selector. If no matches exist, it returns null
. Here is an example:
const email = document.querySelector('#signup input[name='email']')
Query Selector All
Want to select a list of elements that match the specified selectors? Use querySelectorAll()
method instead. This method takes multiple CSS selectors as input and returns a NodeList, a list of DOM elements that match the given selectors. Let us select all elements with a class of either bird
or animal
from the above HTML markup:
const elems = document.querySelectorAll('.bird, .animal')
console.log(elems.length) // 4
Function Chaining
You can also chain multiple functions together to search elements within another element. You first need to select a single element using either getElementById()
or querySelector()
, and then chain another function to search within:
<form id='signup'>
<input type='text' name='email'>
<input type='tel' name='phone'>
<input type='date' name='date-of-birth'>
</form>
Get all input
elements inside of an element that has the ID signup
:
const inputs = document.getElementById('signup').getElementsByTagName('input')
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input')
Traversing HTMLCollection
and NodeList
Most of the methods we discussed above (except getElementById()
and querySelector()
) returns multiple elements as either an HTMLCollection
or a NodeList
.
The HTMLCollection
is not an array but a generic collection of elements. So it is impossible to iterate over it with the forEach()
or map()
method. However, we can convert it to a real array and then iterate using the Array.from()
method:
const inputs = document.getElementById('signup').getElementsByTagName('input')
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
console.log(element)
})
Although NodeList
is also not an array, it does provide the forEach()
method to iterate over the elements:
const inputs = document.querySelector('#signup').querySelectorAll('input')
//iterate over NodeList
inputs.forEach(element => {
console.log(element)
})
Conclusion
That's all for getting DOM elements using JavaScript. We have learned about many different methods to access the DOM elements: using the id
attribute, HTML tag name, name
attribute, class
attribute, and CSS selectors. We also discussed ways to iterate over the generic collection of elements returned by these methods.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur