如何获取HTML列表中所有子元素的ID？

嘿，我来帮你搞定这个问题！首先咱们先看看你现有代码里的几个小问题，然后一步步修正，最后给你靠谱的实现方式～

现有代码的问题点 #

1. 循环逻辑漏洞：getElementsByTagName("li")返回的元素集合索引是从0开始的，你从i=1开始循环，再加上i < 集合长度的条件，会直接漏掉最后一个li元素（比如你的列表有4个li，长度是4，i最大到3，但循环条件i<4会让i停在3，对应id=3的li，id=4的li完全没被遍历到）。
2. 低效且不可靠的元素获取：你已经能直接拿到ul下的所有li集合了，没必要再通过document.getElementById(i)去查找元素——万一li的id不是连续数字，这种方法直接失效。
3. 属性获取错误：你用了element.value，但li元素本身没有标准的value属性，你要的是ID，应该用element.id。

正确的实现方案 #

这里给你两种常用的写法，都能把所有li的ID存入数组：

写法1：传统for循环遍历（兼容性好） #

function getIDs() {
  // 先拿到目标ul下的所有li元素
  const liList = document.getElementById("myUL1").getElementsByTagName("li");
  const idArray = [];
  
  // 遍历每个li元素
  for (let i = 0; i < liList.length; i++) {
    const currentId = liList[i].id;
    idArray.push(currentId);
    // 保留alert看结果，没问题
    alert(currentId);
  }
  
  // 最后idArray里就是所有的ID啦，也可以用console.log看更清晰
  console.log(idArray);
}

写法2：ES6+简洁写法（更现代） #

如果你的项目不需要兼容老旧浏览器，用这种写法更清爽：

function getIDs() {
  // 用querySelectorAll直接拿到ul下的所有li
  const liList = document.getElementById("myUL1").querySelectorAll("li");
  const idArray = [];
  
  // 把NodeList转成数组后用forEach遍历
  Array.from(liList).forEach(li => {
    const currentId = li.id;
    idArray.push(currentId);
    alert(currentId);
  });
  
  console.log(idArray);
}

另外，你的HTML代码里，li的id属性最好加上引号，虽然浏览器能识别，但符合HTML标准写法更稳妥：

<ul id="myUL1">
  <li id="1" value="A">First</li>
  <li id="2" value="B">Second</li>
  <li id="3" value="C">Third</li>
  <li id="4" value="D">Fourth</li>
</ul>
<button onclick="getIDs()" style="border-radius: 0px; height:30px">Test</button>

小补充 #

• getElementsByTagName返回的是动态集合，如果后续DOM有变化，这个集合会自动更新；而querySelectorAll返回的是静态集合，不会随DOM变化，你可以根据需求选。
• 如果你的ul里有嵌套的li，想只获取直接子元素的话，可以用querySelectorAll("#myUL1 > li")，这样就不会拿到嵌套在其他元素里的li啦。

内容的提问来源于stack exchange，提问作者LiquidSnake