Obtenga todos los elementos LI en el conjunto

Question

¿Cómo puedo hacer que JS seleccione cada elemento LI dentro de una etiqueta UL y los coloque en una matriz?

<div id="navbar"> 
     <ul> 
      <li id="navbar-One">One</li 
      ><li id="navbar-Two">Two</li 
      ><li id="navbar-Three">Three</li 
      ><li id="navbar-Four">Four</li 
      ><li id="navbar-Five">Five</li> 
     </ul> 
    </div> 

¿Puedo hacerlo de modo JS obtiene cada uno de ellos en una matriz, por ejemplo barra de navegación [ '0'] volvería document.getElementById ("navbar-Uno")?

Answer 1

usted puede conseguir un NodeList de repetición de getElementsByTagName() mediante el uso, por ejemplo:

var lis = document.getElementById("navbar").getElementsByTagName("li"); 

You can test it out here. Esta es una NodeList, no una matriz, pero tiene un .length y puede iterar sobre ella como una matriz.

Answer 2

Después han pasado algunos años, puede hacerlo ahora con ES6 Array.from (o spread syntax):

const navbar = Array.from(document.querySelectorAll('#navbar>ul>li')); 
 
console.log('Get first: ', navbar[0].textContent); 
 

 
// If you need to iterate once over all these nodes, you can use the callback function: 
 
console.log('Iterate with Array.from callback argument:'); 
 
Array.from(document.querySelectorAll('#navbar>ul>li'),li => console.log(li.textContent)) 
 

 
// ... or a for...of loop: 
 
console.log('Iterate with for...of:'); 
 
for (const li of document.querySelectorAll('#navbar>ul>li')) { 
 
    console.log(li.textContent); 
 
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

<div id="navbar"> 
 
    <ul> 
 
    <li id="navbar-One">One</li> 
 
    <li id="navbar-Two">Two</li> 
 
    <li id="navbar-Three">Three</li> 
 
    </ul> 
 
</div>