javascript - 如何获取 HTML 列表对象中元素的 Id？

Question

我想获取我声明的列表的所有ID，我该怎么做？

我正在尝试执行此操作，然后在 JavaScript 中我想将所有这些值放入列表中。不要关注alert，它是用来查看它获取的id 是什么。

function getIDs() {
  for (i = 1; i < document.getElementById("myUL1").getElementsByTagName("li").length; i++) {
    var e = document.getElementById(i).value;
    alert(e);
  }
}

<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>

Answer 1

您需要改进以下方面

• 要迭代所有元素，for 循环中的条件应为 i <=
• li元素没有value属性(property)、使用getAttribute

function getIDs() {
  
	for(i = 1; i <= document.getElementById("myUL1").getElementsByTagName("li").length; i++){
		var e = document.getElementById(i).getAttribute("value");
		console.log(e);
	}
	
}

<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>

编辑

修改了示例，以便更好地了解如何检索 id(从评论中)

function getIDs() {
  var lis = document.getElementById("myUL1").getElementsByTagName("li");
  for (li of lis) {
    console.log(li.getAttribute("id")); // paints id
    console.log(li.getAttribute("value")); // paints value
  }
}

<ul id="myUL1">
  <li id="myUL1-Li1" value=A>First</li>
  <li id="myUL1-Li2" value=B>Second</li>
  <li id="myUL1-Li3" value=C>Third</li>
  <li id="myUL1-Li4" value=D>Fourth</li>
</ul>

<button onclick="getIDs()" style="border-radius: 0px; height:30px">Test</button>