Get all LI elements in array

Question

How can i make JS select every LI element inside a UL tag and put them into an array    lt div id  navbar  gt       lt ul gt           lt li id  navbar-One  gt One lt  li gt           lt li id  navbar-Two  gt Two lt  li gt           lt li id  navbar-Three  gt Three lt  li gt           lt li id  navbar-Four  gt Four lt  li gt           lt li id  navbar-Five  gt Five lt  li gt       lt  ul gt   lt  div gt    Can i make it so JS gets each of them into an array eg navbar  0   would return document getElementById  navbar-One

User · Answer

If you want all the li tags in an array even when they are in different ul tags then you can simply do

var lis = document.getElementByTagName('li');

and if you want to get particular div tag li's then:

var lis = document.getElementById('divID').getElementByTagName('li');

else if you want to search a ul first and then its li tags then you can do:

var uls = document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++){
    var lis=uls[i].getElementsByTagName('li');
    for(var j=0;j<lis.length;j++){
        console.log(lis[j].innerHTML);
    }
}

User · Answer

QuerySelectorAll will get all the matching elements with defined selector  Here on the example I ve used element s name li tag  to get all of the li present inside the div with navbar element    x000D   x000D      let navbar   document x000D         getElementById  navbar   x000D         querySelectorAll  li    x000D   x000D      navbar forEach  item  index    gt    x000D        console log   index  item    x000D          x000D      x000D   lt div id  navbar  gt  x000D    lt ul gt  x000D     lt li id  navbar-One  gt One lt  li gt  x000D     lt li id  navbar-Two  gt Two lt  li gt  x000D     lt li id  navbar-Three  gt Three lt  li gt  x000D     lt li id  navbar-Four  gt Four lt  li gt  x000D     lt li id  navbar-Five  gt Five lt  li gt  x000D    lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

After some years have passed  you can do that now with ES6 Array from  or spread syntax     x000D   x000D  const navbar   Array from document querySelectorAll   navbar gt ul gt li     x000D  console log  Get first     navbar 0  textContent   x000D   x000D     If you need to iterate once over all these nodes  you can use the callback function  x000D  console log  Iterate with Array from callback argument     x000D  Array from document querySelectorAll   navbar gt ul gt li   li   gt  console log li textContent   x000D   x000D         or a for   of loop  x000D  console log  Iterate with for   of     x000D  for  const li of document querySelectorAll   navbar gt ul gt li      x000D      console log li textContent   x000D    x000D   as-console-wrapper   max-height  100   important  top  0    x000D   lt div id  navbar  gt  x000D     lt ul gt  x000D       lt li id  navbar-One  gt One lt  li gt  x000D       lt li id  navbar-Two  gt Two lt  li gt  x000D       lt li id  navbar-Three  gt Three lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can get a NodeList to iterate through by using getElementsByTagName    like this   var lis   document getElementById  navbar   getElementsByTagName  li      You can test it out here   This is a NodeList not an array  but it does have a  length and you can iterate over it like an array

[javascript] Get all LI elements in array

Examples related to javascript