Filter or map nodelists in JavaScript - Coding

When working with HTML elements in JavaScript, you often get a NodeList, which is a collection of elements that match a certain selector. However, NodeLists don’t have built-in methods for filtering or mapping as arrays do.

These are the following approaches:

Table of Content

Using Array.from() and filter() Method
Using Spread Operator and map() Method

Using Array.from() and filter() Method

This approach involves converting the NodeList to an array using Array.from() and then applying the filter() or map() method. Array.from() creates a new array instance from an array-like or iterable object, such as a NodeList.

Example: This example shows the use of filter() method to filter the nodelist.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Filter NodeList Example</title>
</head>

<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>

    <script>
        // Get the NodeList of all <li> elements
        const nodeList = document.querySelectorAll('li');

        // Convert NodeList to array and filter elements with class 'item'
        const filteredItems = Array.from(nodeList)
            .filter(item => item.classList.contains('item'));

        // Log the text content of filtered elements
        filteredItems.forEach(item => console.log(item.textContent));
    </script>
</body>

</html>

Output:

Using Spread Operator and map() Method

This approach involves using the spread syntax to convert the NodeList to an array and then applying the map() method. The spread syntax allows an iterable such as a NodeList to be expanded into individual elements.

Example: This example shows the use of map() method to map the nodelist.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Map NodeList Example</title>
</head>

<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>

    <script>
        // Get the NodeList of all <li> elements
        const nodeList = document.querySelectorAll('li');

        // Convert NodeList to array and map
      // elements to their text content
        const itemTexts = [...nodeList].map(item => item.textContent);

        // Log the array of text contents
        console.log(itemTexts);
    </script>
</body>

</html>

Output: The output will be shown in the console of Browser.

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Split JavaScript Array in Chunks Using Lodash?
How to Find Property by Name in a Deep Object Using Lodash?
How to Import a Single Lodash Function?
How to Remove First and Last Element from Array using JavaScript?
How to Sort an Array Based on the Length of Each Element in JavaScript?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	18