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!