获取数组中的所有 LI 元素答案

【问题标题】：Get all LI elements in array获取数组中的所有 LI 元素
【发布时间】：2011-04-30 12:17:47
【问题描述】：

如何让 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")？

【问题讨论】：

标签： javascript

【解决方案1】：

var allElmnts = document.querySelectorAll("ul");
var arr = []; 
arr.length = allElmnts.length; 
for(var i = 0; i < allElmnts.length; i++){

    arr[i] = allElmnts[i]; 

}

【讨论】：

【解决方案2】：

如果你想要一个数组中的所有 li 标签，即使它们在不同的 ul 标签中，那么你可以简单地做

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

如果你想获得特定的 div 标签 li，那么：

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

如果你想先搜索一个 ul 再搜索它的 li 标签，那么你可以这样做：

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);
    }
}

【讨论】：

【解决方案3】：

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

    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>

【讨论】：

【解决方案4】：

几年过去了，您现在可以使用 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>

【讨论】：

一种替代方案，但似乎不必要地复杂
接受的答案调用了两个 DOM 方法，而这个解决方案只调用了一个。接受的答案不会产生 Array 实例，而这个答案会通过添加一个非常易读的Array.from （我的意思是：它说明了它的作用，对吗？）。所以我不明白为什么这应该被认为是“复杂的”。

【解决方案5】：

您可以通过使用getElementsByTagName() 来获取一个NodeList 进行迭代，如下所示：

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

You can test it out here。这是一个 NodeList 不是数组，但它确实有一个 .length，您可以像数组一样迭代它。

【讨论】：

需要强调的是：这不是数组。它的行为不会像一个数组。如果您在任何时候选择从 HTML 中删除 LI 元素，则其条目将从集合中“弹出”，其上方的所有内容将向下移动以填充空间，并且 .length 将减少。对于希望生成array 的任何人来说，这不是一个合适的解决方案，这只能通过遍历元素或converting it to an array 来实现。