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

Как я могу заставить 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 получал каждый из них в массив, например navbar ['0'] вернет document.getElementById( "navbar-One" )?

Ответ 1

Вы можете получить NodeList для итерации с помощью getElementsByTagName(), например:

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

Здесь вы можете проверить это. Это NodeList не массив, но он имеет .length, и вы можете перебирать его как массив.

Ответ 2

По прошествии нескольких лет вы можете сделать это сейчас с ES6 Array.from (или синтаксис распространения):

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>