How to find and get HTML Elements in JavaScript

How to find and get HTML Elements in JavaScript

JavaScript is frequently used to manipulate HTML elements. To do so, you must first locate the elements. There are several approaches to this:

• Identifying HTML elements by Id
• Identifying HTML elements based on tag names
• Searching for HTML elements by class name
• Searching for HTML elements by name attribute
• Find HTML elements using CSS selectors

Finding HTML Elements by ID

The getElementById() method is the most straightforward way to locate an HTML element in the DOM. The getElementById() method returns an element with the value specified. Because an element’s id is unique within an HTML document, the document.getElementById() is a fast way to get to an element.

This example looks for the element with the id="intro":

const element = document.getElementById("intro");

If the element is found, the method will return the element as an object (in element).
If the element is not found, element will contain null.

Finding HTML Elements by Tag Name

The getElementsByTagName() method returns a collection of all elements with a specified tag name.

This example finds all <p> elements:

const element = document.getElementsByTagName("p");

Finding HTML Elements by Class Name

Use getElementsByClassName() to find all HTML elements with the same class name.
This example returns a list of all elements that have the class="intro" attribute.

const x = document.getElementsByClassName("intro");

Finding HTML Elements by Name

The getElementsByName() method returns the elements that match the value of the name attribute with the passed string.

document.getElementByName("first-name");

Finding HTML Elements using querySelector

The querySelector method returns the first element that matches the passed selector.

// using id selector 
document.querySelector("#parent");

// using class selector 
document.querySelector(".myclass"); //Returns first element in the document with class name 

// using tagname  
document.querySelector("p"); //Returns the first p element 

// using tagname  
document.querySelector("div span.child"); //Returns first span element with class name child, inside a div 

Finding HTML Elements using querySelectorAll

The querySelectorAll method is an extension of the querySelector method. Use the querySelectorAll() method to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, attribute values, and so on).

This example returns a list of all <h2> elements that have the class=“subheading” attribute.

const x = document.querySelectorAll("h2.subheading");

Conclusion

The most common JavaScript methods for finding and retrieving elements in a JavaScript program are:

• getElementById()
• getElementsByTagName()
• getElementsByClassName()
• and querySelectorAll()

You can use any of the methods listed above to find a specific HTML element in the code. This article discussed how to find and retrieve HTML elements in JavaScript.

If you liked this article, then please share. You can also find me on Twitter for more updates.