为什么 document.getElementsByName().length 总是返回 0？答案

【问题标题】：why document.getElementsByName().length always return 0?为什么 document.getElementsByName().length 总是返回 0？
【发布时间】：2020-05-29 13:25:17
【问题描述】：

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

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>

【问题讨论】：

标签： getelementsbyname

【解决方案1】：

替换

document.getElementsByName('li')

与

document.getElementsByTagName('li')

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

【讨论】：

如果您使用此方法，您还必须指定您尝试获取的列表项的长度
约翰，根据问题，我相信他对 getElementByName 和 getElementByTagName 感到困惑，他只是在测试功能......
是的。你是对的。我使用了错误的功能。谢谢。

【解决方案2】：

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

您的列表项都没有名称，为此您应该更新您的代码，以便您的项目有名称。

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

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

【讨论】：

【解决方案3】：

您可以这样做，因为getElementsByTagName() 返回 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() 虽然也返回 NodeList，但它返回 whole 文档中所有 same 名称元素的列表，因此要完成这项工作，您需要为所有列出项目。

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>

【讨论】：