How to Get Elements From the DOM Using JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-09-19 18:17:01

---
title: How to Get Elements From the DOM Using JavaScript
published: true
date: 2022-09-19 10:58:26 UTC
tags: Javascript,Beginners,webdev,programming
canonical_url: https://blog.shahednasser.com/how-to-get-elements-from-the-dom-using-javascript/
cover_image: https://blog.shahednasser.com/static/e1e7a4c25e44c189d9cf97060890c67b/js-elm.jpg
---

_Originally posted on [my personal blog](https://blog.shahednasser.com/how-to-get-elements-from-the-dom-using-javascript/)._

While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.

This tutorial shows you different ways to get an element from the DOM using JavaScript.

## getElementById

The [getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method allows you to retrieve an element from the DOM using the element's ID.

If no element exists in the DOM with the supplied ID, `null` will be returned instead.

For example:

```
const mainElement = document.getElementById('main');
```

## getElementsByTagName

The [getElementsByTagName()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) allows you to retrieve an [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) of elements that have the tag name you supply to the method. An example of a tag name is `div`.

Items in an `HTMLCollection` can be accessed similarly to how you would access items in an array.

For example:

```
const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);
```

You can use this method on any element and not just the `document`. That way, you can retrieve all children of that element that have the supplied tag name.

For example:

```
const divElements = document.getElementsByTagName('div');
const pElements = divElements[0].getElementsByTagName('p');
console.log(pElements);
```

## getElementsByClassName()

The [getElementsByClassName()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) method allows you to retrieve a live `HTMLCollection` of elements that have the class name you provide as a parameter.

A live `HTMLCollection` means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.

For example:

```
const mainElements = document.getElementsByClassName('main');
console.log(mainElements);
```

## getElementsByName()

The [getElementsByName()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) method allows you to retrieve elements by the value of the `name` attribute. For example, you can use it to retrieve `input` elements that have the `name` attribute set to `email`.

This method returns a live [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), which is generally similar to an `HTMLCollection`, but the items in the list can be accessed through the [methods](https://developer.mozilla.org/en-US/docs/Web/API/NodeList#methods) it provides.

For example:

```
const emailElements = document.getElementsByName('email');
console.log(emailElements.item(0));
```

## querySelector

The [querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method allows you to retrieve the first element that matches the specified selector. The selector can be any [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).

For example:

```
const elm = document.querySelector('.main > p');
console.log(elm);
```

This method can be used on any element, and not just the `document`. So, you can use it to retrieve a child element of a parent element that matches the specified selector.

For example:

```
const table = document.querySelector('.main > table');
const thead = table.querySelector('thead');
```

## querySelectorAll

The [querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method allows you to retrieve all elements that match the specified selector. This method returns a `NodeList`.

For example:

```
const elms = document.querySelectorAll('.main > p');
console.log(elms.item(0));
```

This method can be used on any element, and not just the `document`. So, you can use it to retrieve all child elements of a parent element that match the specified selector.

For example:

```
const table = document.querySelector('.main > table');
const rows = table.querySelectorAll('tr');
for (const row of rows) {
    console.log(row);
}
```

## children

The `children` property allows you to retrieve all immediate child elements of the `document` or any element. This property's type is a live `HTMLCollection`.

For example:

```
const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.children);
}
```

## firstElementChild

The `firstElementChild` property allows you to retrieve the first child element of the `document` or any element.

If the element does not have children, the value of `firstElementChild` is `null`.

For example:

```
const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.firstElementChild);
}
```

## lastElementChild

The `lastElementChild` property allows you to retrieve the last child element of the `document` or any element.

If the element does not have children, the value of `lastElementChild` is `null`:

```
const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.lastElementChild);
}
```

## scripts

The `scripts` property allows you to retrieve all `<script>` elements in the document. It returns an `HTMLCollection` of elements.

For example:

```
console.log(document.scripts);
```

## elementFromPoint

The [elementFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint) method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.

For example:

```
const elm = document.elemetFromPoint(100, 20);
console.log(elm);
```

## elementsFromPoint

The [elementsFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint) method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.

For example:

```
const elms = document.elementsFromPoint(100, 20);
console.log(elm[0]);
```

## closest

The [closest()](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) method available on elements (not on the `document`) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns `null`.

For example:

```
const closestElm = table.closest('div');
console.log(closestElm);
```

## nextElementSibling

The `nextElementSibling` property on elements (not on the `document`) allows you to retrieve the element that follows the current element among its parent's child elements.

If there are no elements after this element, the value of the property will be `null`.

For example:

```
console.log(table.nextElementSibling);
```

## previousElementSibling

The `previousElementSibling` property on elements (not on the `document`) allows you to retrieve the element that proceeds the current element among its parent's child elements.

If there are no elements before this element, the value of the property will be `null`.

For example:

```
console.log(table.previousElementSibling);
```

## Conclusion

This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case.