How to Get Elements From the DOM Using JavaScript

Originally posted on my personal blog.

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() 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() allows you to retrieve an 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() 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() 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, which is generally similar to an HTMLCollection, but the items in the list can be accessed through the methods it provides.

For example:

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

querySelector

The querySelector() method allows you to retrieve the first element that matches the specified selector. The selector can be any CSS selector.

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() 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() 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() 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() 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.