DEV Community

Cover image for JavaScript DOM - Part 6 - Get Elements By TagName [video + article]
Tharun Shiv
Tharun Shiv

Posted on

JavaScript DOM - Part 6 - Get Elements By TagName [video + article]

This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You're reading Part 6

You can read Part 5 here:

Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun

Several Elements with the same Tag Name

Example of tags: <p> <img> <form> <h1>

We know that the same tag can be used. We can grab all of these elements having a particular tag name. Example use cases may be like, grabbing all the buttons of the page, grabbing all the images, or any element for that matter.

Get elements by tag name

When we use document.getElementsByTagName('element'), it grabs all the elements that have the same tag name and returns us an HTML Collection that we can index or iterate to get the elements that we need in particular. An HTML Collection is similar to an Array that we're used to, so you can index it or get the length of it.

syntax:

document.getElementsByTagName('element')
Enter fullscreen mode Exit fullscreen mode

example:
HTML

<p>Hey there</p>
<p>How's it going?</p>
<p>Great!</p>
<p>A set of elements with same tag</p>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let para = document.getElementsByTagName('p');
console.log(para)

console.log(para[0].innerText)
Enter fullscreen mode Exit fullscreen mode

output

HTMLCollection[]

Hey there
Enter fullscreen mode Exit fullscreen mode

You can access the individual elements by indexing and access their properties, change them, and do anything. But wait, that's not all of it.

Iterating through the HTML Collection

We can iterate through the HTML Collection, apply a particular operation on all of them. Below is an example of such iteration.

HTML

<p>Hey there</p>
<p>How's it going?</p>
<p>Great!</p>
<p>A set of elements with same tag</p>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let para = document.getElementsByTagName('p');

for (let x=0 ; x < para.length ; x++ ) {
   para[x].style.color = 'dodgerblue';
}
Enter fullscreen mode Exit fullscreen mode

When this code is run, all the elements that have the tag name as 'p' are changed to dodgerblue text color. In the for loop, the para.length gives the length of the HTML Collection, which is used by the for-loop.
So as the usual rule goes by, once you grab an element, you can do anything with it.

Note: it is getElementsByTagName, remember to add the 's' and be cautious about the capitalizations.

So this is all you need to know for now about getting Elements By Tag Name

Next Part coming tomorrow, where we discuss how you can get multiple elements by using QuerySelector.

Thank you for reading ๐Ÿ˜Š

Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun

Written by,

[deleted user] image

[Deleted User]

Top comments (14)

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Looking forward for the Query Selectors ๐Ÿ˜Š Subscribed to the YouTube Channel ๐Ÿ‘

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

yep same here

Collapse
 
developertharun profile image
Tharun Shiv

Thank you

Collapse
 
venkat121998 profile image
venkat anirudh

yeah

Collapse
 
developertharun profile image
Tharun Shiv

Thank you Venkat

Collapse
 
developertharun profile image
Tharun Shiv

Thanks!

Collapse
 
andogq profile image
Tom Anderson

Nice article! Just thought I'd add to the iteration bit:

Any DOM selector that returns mutlple objects (getElementsByTagName, getElementsByClassName ect) return a HTMLCollection object, which is different from an array, lacking all of the useful prototype functions like forEach which would make iteration easier and cleaner as opposed to a for loop.
To get around this, I like to use the ES6 spread operator on the result of the DOM function, effectively 'converting' it into a normal JS array, allowing me to operate and iterate over it as usual! See below for an example!

let para = [...document getElementsByTagName("p")];
para.forEach(p => {
    ... 
});
Collapse
 
developertharun profile image
Tharun Shiv

That's a beauty! Thanks for contributing ๐Ÿ™‚

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Good article. Subscribed to the YouTube Channel

Collapse
 
developertharun profile image
Tharun Shiv

Glad it helped ๐Ÿ˜Š

Collapse
 
venkat121998 profile image
venkat anirudh

good one

Collapse
 
developertharun profile image
Tharun Shiv

Thank you

Collapse
 
jreckers profile image
jreckers

I have so been looking for information on these topics, as a newbie, I like the howโ€™s and whyโ€™s of the DOM construct! Looking forward to more!

Collapse
 
developertharun profile image
Tharun Shiv

Yep that's very exciting! Glad to help ๐Ÿ™‚ If you would like video content on these , you can check them out on the YouTube channel : youtube.com/c/developerTharun