如何获取HTML列表对象中元素的ID？

Question

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

我正在尝试执行此操作，然后在JavaScript中将所有这些值放在列表中。 不要关注警报，它用于查看警报的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属性，请使用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> 

Answer 2

由于您已经使用document...getElementsByTagName("li")来引用元素，因此无需使用getElementById() 。

另外，如果您需要持久存储任意数据，请使用自定义data-*属性（该属性可以使用HTMLElement.dataset属性检索），否则li没有有效的value属性。

 function getIDs() { var elements = document.getElementById("myUL1").getElementsByTagName("li"); for (i = 0; i < elements.length; i++) { var elem = elements[i]; console.log(elem.id, elem.dataset.value); } } 

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