How to get all LI elements in UL using JavaScript

The .getElementsByTagName() method returns a NodeList object, or an array of elements inside an element (or the tag name that you have provided to the method).

For example, the below script will return a NodeList object, which will have all <li> element on a web page.

<script>
    document.getElementsByTagName('li');
</script>

Since, I am using the method getElementsByTagName() with the document, it will return all the <li> elements (visible or invisible) on a web page. You can iterate the array (the NodeList object) and get the details of each element.

Get all <li> Elements in <ul> using .getElementByTagName() Method

To get all the lis inside an ul element, you have to provide the parent <ul> element to the method. For example,

<ul id='nav_1'>
    <li>t1</li>
    <li>t2</li>
    <li>t3</li>
</ul>

<script>
    let lis = document.getElementById('nav_1').getElementsByTagName('li');
    console.log(lis);
</script>

Or, you can use this method.

const ul = document.getElementById('nav_1');
const listItems = ul.getElementsByTagName('li');
    
// Loop through the NodeList object.
for (let i = 0; i <= listItems.length - 1; i++) {
    console.log (listItems[i]);
}

Using .querySelectorAll() Method

You can use the .querySelectorAll() method in JavaScript to extract all <li> elements inside <ul>. For example,

<ul id='nav_1'>
    <li>t1</li>
    <li>t2</li>
    <li>t3</li>
</ul>

<!--Adding another ul-->
<ul>
    <li>t21</li>
</ul>

<script>
    const ul = document.querySelectorAll('ul li');
    for (let i = 0; i <= ul.length - 1; i++) {
        console.log(ul[i]);
    }
</script>

The method returns a NodeList. Remove the for loop... and run this code... console (ul); and you will see the NodeList.

Note: To read <li> text or value, write console.log (ul[i].innerHTML);

The querySelectorAll() returns a NodeList that matches a given CSS selector. You can provide multiple selectors, as I have done in the above example ('ul li').

Remember: The above method will return all <li> inside every <ul> element. Therefore, if you have multiple <ul> elements, the querySelectorAll() will return all the <li>’s inside every <ul> element.

You can limit the result to a single or particular <ul> element only, by providing the class name of the <ul> as selector to querySelectorAll() method.

In this example, let us assume I have a <ul> with class name navi.

<ul id='nav_1' class='navi'>
    <li>t1</li>
    <li>t2</li>
    <li>t3</li>
</ul>

Now, simply provide the class name to the method like this,

<script>
    const listItems = document.querySelectorAll('.navi li');
    for (let i = 0; i <= listItems.length - 1; i++) {
        console.log(listItems[i]);
    }
</script>

That's it. Thanks for reading. ☺

← PreviousNext →