How to Get All LI within a UL using JavaScript?

To get all <li> that are within a <ul> element, you can use the getElementById() method of the DOM in combination with the children property.

The getElementById() method takes a single parameter and returns an element object whose id matches the string we passed as a parameter. Whereas, the children property returns an array containing all the child elements of the given parent element.

Let’s say we have the following <ul> in our HTML document with four <li> inside of it:

<ul id="my_list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

We want to get a list of all list items(<li>) that are inside of a list(<ul>) dynamically with JavaScript. For that purpose, we have assigned an id="my_list" to the list(<ul>) so that we can use the getElementById() method on it.

See the following example:

// Get the <ul> node
const ul = document.getElementById("my_list");

// Get all children(<li>) of the list(<ul>)
const lis = ul.children;

for(let i=0;i<lis.length;i++){
    console.log(lis[i].innerText);
}

// Output:
// Item 1
// Item 2
// Item 3
// Item 4

Method 2: Using querySelectorAll() Method

The above method only works when the list(<ul>) has an id assigned to it. If it has a class or something else, it will not work. In such cases, we prefer the querySelectorAll() method.

The querySelectorAll() is also a DOM method. It returns a list of all the elements that match the given CSS selector.

For example, querySelectorAll(".myClass") will return a list of elements that have the class myClass. Similarly, querySelectorAll("ul li") will return all <li> that are within the <ul> and so on.

Let’s say we have two lists(<ul>), one with a class="my_list" and the another without any class:

<ul class="my_list">
    <li>First list item 1</li>
    <li>First list item 2</li>
    <li>First list item 3</li>
</ul>

<ul>
    <li>Second list item 1</li>
    <li>Second list item 2</li>
    <li>Second list item 3</li>
</ul>

We want to get all the <li> that are only within the <ul> with class="my_list".

To do that, we have to pass a CSS selector .my_list li to the querySelectorAll() method. The CSS selector .my_list li will select every <li> that is inside a list with a class .my_list.

See the following example:

// Get each li within a <ul> with class .my_list
const listItems = document.querySelectorAll(".my_list li");

for(let i = 0; i < listItems.length; i++){
    console.log(listItems[i].innerText);
}

// Output:
// First list item 1
// First list item 2
// First list item 3

If you want to get the list items(<li>) from both lists(<ul>), you can pass the CSS selector ul li to the querySelectorAll() method.

The CSS selector ul li represents each <li> which is inside of a <ul>. The <ul> needs not to have any class.

The following example gets list items from both lists:

// Get each li within a <ul> with or without any class
const listItems = document.querySelectorAll("ul li");

for(let i = 0; i < listItems.length; i++){
    console.log(listItems[i].innerText);
}

// Output:
// First list item 1
// First list item 2
// First list item 3
// Second list item 1
// Second list item 2
// Second list item 3