How to find and get HTML Elements in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-11-30 13:00:00

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

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

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

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

```javascript 
document.getElementByName("first-name");
```

## Finding HTML Elements using querySelector

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

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

```javascript
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](https://twitter.com/maxlockwood88) for more updates.