Получить все элементы LI в массиве

Question

Как я могу заставить JS выбрать каждый элемент LI внутри тега UL и поместить его в массив?

<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> 

Могу ли я сделать так, JS получает каждый из них в массив, например навигационной панели [ '0'] вернет document.getElementById ("NavBar-One")?

Answer 1

Вы можете получить NodeList перебирать с помощью getElementsByTagName(), как это:

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

You can test it out here. Это NodeList не массив, но он имеет .length, и вы можете перебирать его как массив.

Answer 2

После того как прошло несколько лет, вы можете сделать это сейчас с ES6 Array.from (или 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>