HTML DOM Li Object | HTML Li | LI Tag in HTML Tutorial by WDH

HTML DOM Li Object


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>

Try it

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');