获取数组中的所有LI元素

Question

如何让JS选择UL标签内的每个LI元素并将它们放入数组中？

    <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")吗？

Answer 1

您可以通过使用迭代来获取NodeList getElementsByTagName(),如下所示:

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

你可以在这里测试一下.这是一个NodeList而不是一个数组,但它有一个.length,你可以像数组一样迭代它.

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

Answer 3

QuerySelectorAll将获取所有具有定义选择器的匹配元素。在示例中，我使用元素的名称（li标签）来获取li带有navbar元素的 div 中的所有内容。

    let navbar = document
      .getElementById("navbar")
      .querySelectorAll('li');

    navbar.forEach((item, index) => {
      console.log({ index, item })
    });

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