Javascript 获取数组中的所有 LI 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4019894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get all LI elements in array
提问by Diesal11
How can i make JS select every LI element inside a UL tag and put them into an array?
如何让 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>
Can i make it so JS gets each of them into an array eg
navbar['0']would return document.getElementById("navbar-One")?
我可以让 JS 将它们每个放入一个数组中，例如
navbar['0']返回document.getElementById("navbar-One")吗？
回答by Nick Craver
You can get a NodeList to iterate through by using getElementsByTagName(), like this:
您可以通过使用来获取 NodeList 进行迭代getElementsByTagName()，如下所示：
var lis = document.getElementById("navbar").getElementsByTagName("li");
You can test it out here. This is a NodeListnot an array, but it does have a .lengthand you can iterate over it like an array.
你可以在这里测试一下。这是一个NodeList不是一个数组，但它确实有一个.length，你可以像数组一样迭代它。
回答by trincot
After some years have passed, you can do that now with ES6 Array.from(or spread syntax):
几年过去了，你现在可以用 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>回答by Vectrobyte
QuerySelectorAllwill get all the matching elements with defined selector. Here on the example I've used element's name(litag) to get all of the lipresent inside the div with navbarelement.
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>