4 Ways Of Accessing HTML Elements In The DOM
Tags: beginners, webdev, javascript, tutorial
Published: 2019-11-26 11:18:01

---
title: 4 Ways Of Accessing HTML Elements In The DOM
published: true
description: In this article we will go over the 4 ways of accessing elements in the DOM.
tags: #beginners #webdev #javascript #tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lh04yamv9sai8u9ey8ly.png
---


The [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) (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:

```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.

```js
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:

```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.

```js
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:

```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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 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:

```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:

```js
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](https://www.youtube.com/zaiste). 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](https://twitter.com/zaiste). Till the next time!