为什么 document.getElementsByName().length 总是 return 0？

Question

我是 JavaScript 的新手。在下面的代码中 getElementsByName("li").length 总是 returns 0 尽管我的 HTML 中有很多 <li>-标签，为什么？

document.addEventListener('DOMContentLoaded', function() {
    var len = document.getElementsByName('li').length;
    alert(len);
})

art of my HTML:

<body>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>
</body>

Answer 1

替换

document.getElementsByName('li')

与

document.getElementsByTagName('li')

发生这种情况是因为您选择的是 tag name 而不是 name！您使用了错误的功能！

Answer 2

您尝试使用的方法是尝试通过名称查找特定元素。

None 个列表项有名称，为此您应该更新代码，使您的项目有名称。

document.addEventListener('DOMContentLoaded', function() {
    var len = document.getElementsByName('list_item_1').length;
    alert(len);
})    

<li name="list_item1">aaaaaa</li>

Answer 3

你可以这样做，因为 getElementsByTagName() returns NodeList 所以你可以像数组一样迭代它或获取长度。

document.addEventListener('DOMContentLoaded', function() {
    var listElements = document.getElementById('list').getElementsByTagName("li");
    alert(listElements.length);
})

<body>
    <ul id="list">
        <li >aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>
</body>

getElementsByName() 虽然也是 returns NodeList 但它 returns 中所有相同名称元素的列表 whole 文件所以为了使这项工作你需要给所有列表项相同的名称。

document.addEventListener('DOMContentLoaded', function() { var len = document.getElementsByName('name').length; alert(len); });

<body> <ul> <li name="name">aaaaaa</li> <li name="name">bbbbbb</li> <li name="name">cccccc</li> </ul> </body>

为什么 document.getElementsByName().length 总是 return 0？

why document.getElementsByName().length always return 0?

getelementsbyname