Article Categories

Selected Reading

Get the last item from node list without using length property in JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can get the last item from a NodeList without using the length property by leveraging CSS selectors, array methods, or destructuring. This is useful when you want to avoid calculating the length explicitly.

Sample HTML Structure

Let's use the following table as our example:

<table id="demo" border="1">
    <tr><td>John</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
</table>

Method 1: Using CSS :last-child Selector

The most direct approach is using CSS selectors to target the last element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Last NodeList Item</title>
</head>
<body>
    <table id="demo" border="1">
        <tr><td>John</td></tr>
        <tr><td>David</td></tr>
        <tr><td>Mike</td></tr>
    </table>

    <script>
        // Using CSS :last-child selector
        const lastRow = document.querySelector('table tr:last-child td');
        console.log("Last value using CSS selector:", lastRow.textContent);
        
        // Alternative with :last-of-type
        const lastRowAlt = document.querySelector('table tr:last-of-type td');
        console.log("Last value using :last-of-type:", lastRowAlt.textContent);
    </script>
</body>
</html>

Last value using CSS selector: Mike
Last value using :last-of-type: Mike

Method 2: Using Array.from() with pop()

Convert the NodeList to an array and use array methods:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Last NodeList Item</title>
</head>
<body>
    <table id="demo" border="1">
        <tr><td>John</td></tr>
        <tr><td>David</td></tr>
        <tr><td>Mike</td></tr>
    </table>

    <script>
        const allRows = document.querySelectorAll('table tr td');
        
        // Convert to array and get last element
        const lastItem = Array.from(allRows).pop();
        console.log("Last value using pop():", lastItem.textContent);
        
        // Using spread operator
        const lastItemSpread = [...allRows].pop();
        console.log("Last value using spread + pop():", lastItemSpread.textContent);
    </script>
</body>
</html>

Last value using pop(): Mike
Last value using spread + pop(): Mike

Method 3: Using Array Destructuring

Extract the last element using destructuring assignment:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Last NodeList Item</title>
</head>
<body>
    <table id="demo" border="1">
        <tr><td>John</td></tr>
        <tr><td>David</td></tr>
        <tr><td>Mike</td></tr>
    </table>

    <script>
        const allRows = document.querySelectorAll('table tr td');
        
        // Using destructuring to get last element
        const [...rest, lastElement] = allRows;
        console.log("Last value using destructuring:", lastElement.textContent);
        
        // Show all elements for comparison
        console.log("All elements:", Array.from(allRows).map(td => td.textContent));
    </script>
</body>
</html>

Last value using destructuring: Mike
All elements: ["John", "David", "Mike"]

Comparison of Methods

Method	Performance	Browser Support	Code Simplicity
CSS :last-child	Excellent	All modern browsers	Very simple
Array.from() + pop()	Good	ES6+	Simple
Destructuring	Fair (creates copy)	ES6+	Moderate

Conclusion

The CSS selector approach (:last-child) is the most efficient method for getting the last item from a NodeList without using the length property. For more complex scenarios, Array methods provide flexibility at the cost of slightly lower performance.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

500 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next