Get all dom elements javascript

How to get DOM elements using JavaScript

The Document Object Model (DOM) is a programming interface for HTML and XML documents created by the browser once the document is loaded. A web page is a document represented by the DOM as nodes and objects. It allows programs to manipulate the document’s content, structure, and styles.

In this tutorial, we shall learn how to use JavaScript to access different nodes (HTML elements) in the DOM. Let us start with the first method: getting an element by ID.

The document ‘s getElementById() method takes the element ID as input and returns an Element object representing the DOM element. Here is an example:

const unicorn = document.getElementById('unicorn') 

The ID is case-sensitive and unique across the entire HTML document. So this method always returns a single element. If no matching element is found, it returns null .

Note: Do not put the # sign before the ID string while calling getElementById() method. You will get null instead of the element, and then you might wonder for hours what has gone wrong.

The getElementsByTagName() method is used to access multiple elements. It takes the tag name as input and returns all of the DOM elements that match the tag name as HTMLCollection :

JavaScript code to access all

elements:

const animals = document.getElementsByTagName('p') 

This method searches only one tag name at a time. But if you pass in * as the tag name, you will get all elements in the DOM:

const allNodes = document.getElementsByTagName('*') 

The getElementsByName() method is used to get a collection of elements by their name attribute and returns a NodeList object:

input type="text" name="email"> input type="tel" name="phone"> input type="date" name="dob"> 

const emails = document.getElementsByName('email') 

Note: Unlike the id attribute, which must be unique, multiple HTML elements can have the same name attribute. That’s why getElementsByName() returns a collection of nodes.

Want to use the class attribute to get a list of matching elements? You can use the getElementsByClassName() method, pass it a class name (without . ), and it will return an HTMLCollection of all DOM elements that have the given class name:

div class="bird owl">🦉div> div class="bird">🐦div> div class="bird eagle">🦅div> div class="animal cat">🐱div> 

const birds = document.getElementsByClassName('bird') 

This method also accepts multiple class names separated by spaces. Let us get all elements that have both the bird and eagle classes:

const eagle = document.getElementsByClassName('bird eagle') 

The querySelector() method is one of the two modern JavaScript methods that allow you to get elements from DOM based on CSS selectors. Just pass in the CSS selector, and you will get the first element that matches the specified selector. If no matches exist, it returns null . Here is an example:

const email = document.querySelector('#signup input[name="email"]') 

Want to select a list of elements that match the specified selectors? Use the querySelectorAll() method instead. This method takes multiple CSS selectors as input and returns a NodeList , a list of DOM elements that match the given selectors. Let us select all elements with a class of either bird or animal from the above HTML markup:

const elems = document.querySelectorAll('.bird, .animal') console.log(elems.length) // 4 

You can also chain multiple functions together to search elements within another element. You first need to select a single element using either getElementById() or querySelector() and then chain another function to search within:

form id="signup"> input type="text" name="email"> input type="tel" name="phone"> input type="date" name="date-of-birth"> form> 

const inputs = document.getElementById('signup').getElementsByTagName('input') // OR const inputs = document.querySelector('#signup').querySelectorAll('input') 

Most of the methods we discussed above (except getElementById() and querySelector() ) returns multiple elements as either an HTMLCollection or a NodeList . The HTMLCollection is not an array but a generic collection of elements. So it is impossible to iterate over it with the forEach() or map() method. However, we can convert it to a real array and then iterate using the Array.from() method:

const inputs = document.getElementById('signup').getElementsByTagName('input') // iterate over HTMLCollection Array.from(inputs).forEach(element =>  console.log(element) >) 

Although NodeList is also not an array, it does provide the forEach() method to iterate over the elements:

const inputs = document.querySelector('#signup').querySelectorAll('input') //iterate over NodeList inputs.forEach(element =>  console.log(element) >) 

That’s all for getting DOM elements using JavaScript. We have learned about many different methods to access the DOM elements: using the id attribute, HTML tag name, name attribute, class attribute, and CSS selectors. We also discussed ways to iterate over the generic collection of elements returned by these methods. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

Get all dom elements javascript

Last updated: Jan 12, 2023
Reading time · 2 min

# Loop through all DOM elements using JavaScript

To loop through all DOM elements:

1. Use the getElementsByTagName() method to get an HTMLCollection containing all DOM elements.
2. Use a for. of loop to iterate over the collection.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div>Box 1div> div>Box 2div> div>Box 3div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const allElements = document.getElementsByTagName('*'); // ✅ Loop through all elements (including html, head, meta, scripts) for (const element of allElements)  console.log(element); > console.log('--------------------'); // ✅ Loop through all elements in body const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody)  console.log(element); > 

The document.getElementsByTagName method returns an HTMLCollection containing the elements with the provided tag name.

If the method is passed an asterisk * as a parameter, it returns a collection containing all DOM elements.

We used a for. of loop to iterate over the collection.

# Breaking out of the loop if a condition is met

Note that you can use the break keyword to break out of a for loop if a certain condition is met.

Copied! 
const allElements = document.getElementsByTagName('*'); for (const element of allElements)  console.log(element); if (element.textContent === 'Box 2')  break; > > 

The selector above contains all of the DOM elements, including the html element, the head element, etc.

# Iterating only over the elements contained in the body tag

If you only need to iterate over the elements contained in the body tag, use the document.querySelectorAll() method.

Copied! 
const allInBody = document.querySelectorAll('body > *'); for (const element of allInBody)  console.log(element); > 

The document.querySelectorAll method takes a string containing a CSS selector as a parameter and returns a NodeList containing the matching elements.

We used a for. of loop to iterate over the NodeList , however, you can also use the NodeList.forEach method.

Copied! 
const allInBody = document.querySelectorAll('body > *'); allInBody.forEach(element =>  console.log(element); >); 

The function we passed to the forEach() method gets called with each element in the NodeList .

The querySelectorAll() method takes one or more comma-separated selectors.

The following example selects all elements with classes my-class and your-class .

Copied! 
const elements = document.querySelectorAll( '.my-class, .your-class' ); elements.forEach(element =>  console.log(element); >); 

You can pass as many comma-separated selectors to the method as necessary.

This might be a more efficient solution if you don’t need to iterate over every single element in the DOM.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник