DEV Community

Cover image for 4 Ways Of Accessing HTML Elements In The DOM
Zaiste
Zaiste

Posted on

19 7

4 Ways Of Accessing HTML Elements In The DOM

The DOM (Document Object Model) is a representation of a web page. It is a combination of elements that form a HTML document. Thanks to the DOM, programs can change the structure and content of a web document.

You can access HTML elements in a document by type, their attributes or using a unique identifier. In this article we will go over the 4 ways of accessing elements in the DOM.

Accessing Elements by Unique Identifier (ID)

The most direct way of accessing an element is by using a unique identifier. Since the identifier is unique, this approach will always return a single element.

Let's consider the following snippet of HTML:

<h1 id="title">This is a uniquely identified title</h1>
<div id="content">
...
</div>

We can access each of these elements by using the getElementById of the document object, e.g.

const title = document.getElementById('title');
console.log(title);

Once you display that element it will return back the corresponding HTML tag content.

It is important to remember that HTML elements cannot use the same ID twice on the web page.

Accessing Elements by Class

Another way of accessing elements on a web page is by identifying them via the values of the class attribute. Since the class values don't have to be unique, this approach allows targeting more than one element at once.

Let's consider the following snippet of HTML:

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can access all the li elements at once using the getElementsByClassName of the document object, e.g.

const pioneers = document.getElementsByClassName('person');

The pioneers variable is a collection (an array) of HTML elements. Also, note that the getElementsByClassName name uses the the plural form (Elements). The getElementById, however, uses the singular form (Element ).

Accessing Elements by Tag

There is also a way to access elements on a web page by the tag name. This approach is less specific and rarely used in practice as a result.

Let's consider the same snippet of HTML:

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can access all the li elements at once using the getElementsByTagName of the document object, e.g.

const pioneersAndMore = document.getElementsByTagName('li');

This approach will also return a collection (an array) of elements. On top of that it will return each and every li tag in the document. If we happen to have another list on that page, but with different classes, this will also return them.

Accessing Elements by CSS Selector

A CSS selector is a codified way to identify various HTML elements on a web page. The IDs must be prefixed with the # sign while classes with the . sign, e.g. #title and .person to identify the title and the pioneers from the previous examples. These are the most basic ways for element identification. CSS Selectors are much more powerful than that.

Let's consider the following snippet of HTML:

<h1 id="title">Internet Pioneers</h1>
<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

We can now access both the title and the list elements using the query methods of the document object. There is the querySelector method to access a single element and querySelectorAll to access more than one element:

const title = document.querySelector('#title');
const pioneers = document.querySelectorAll('.person');

Also, the querySelectorAll returns a static collection while all the getElements* methods return live collections. A live collection will auto-update once there are some changes on the web page (e.g. in response to another JavaScript program adding new elements that match the criteria of those methods).


This is a concise introduction to working with HTML using JavaScript. We went over some essential ways of accessing HTML elements on a web page. This should provide a good base and a staring point to the further explore the wonderful world of the web browser.

If you liked this article, consider subscribing to my YouTube channel. I produce free videos teaching programming in JavaScript, Dart and Flutter. Also, if you'd like to see my new content right away, consider following me on Twitter. Till the next time!

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay