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

您可以使用getElementsByTagName()来获取NodeList，如下所示：

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

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

Answer 2

经过几年后，您现在可以使用ES6 Array.from（或spread syntax）执行此操作：

＆＃13;

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

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<div id="navbar">
  <ul>
    <li id="navbar-One">One</li>
    <li id="navbar-Two">Two</li>
    <li id="navbar-Three">Three</li>
  </ul>
</div>

＆＃13;

Answer 3

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

    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>

Answer 4

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

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

如果你想获得特定的 div 标签 li's 然后：

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

获取数组中的所有LI元素

4 个答案: