获取阵列中的所有LI元素

问题描述：

如何让JS选择UL标签中的每个LI元素并将它们放入数组中？获取阵列中的所有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他们每个人进入一个阵列上，比如导航栏[0]会返回的document.getElementById（“导航栏一”）？

答

你可以得到一个节点列表使用getElementsByTagName()，像这样遍历：

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

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

完蛋了！谢谢！ – Diesal11 2010-10-26 00:44:46

第一个链接被破坏... – Haris 2016-04-13 15:54:07

重要的是强调：**这不是一个数组**。它不会像数组一样。如果您在任何时候选择从HTML中删除一个'LI'元素，它的条目将从集合中“弹出”，其上的所有内容将向下移动以填充空间，并且'.length'将减少。对于任何想要生成'array'的人来说，这都不是一个合适的解决方案，而这只能通过遍历元素或[将其转换为数组]来实现（http://*.com/questions/222841/most-高效路到转换-AN-的HTMLCollection到一个阵列）。 – 2016-08-10 23:45:46

答

经过几年过去了，你能做到这一点现在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>

一个替代方案，但似乎不必要的复杂 – commonSenseCode 2017-12-12 14:11:23

获取阵列中的所有LI元素

相关推荐