javascript - getElementsByTagName 不是函数。它调用不在列表中

Question

<div id="menuItems">
            <a href="#"><img src="package.svg" alt="Склад"><span> Склад<span></a>         
            <a href="#"><img src="report.svg" alt="Склад"><span> Отчеты</span></a>
            <a href="#"><img src="worker.svg" alt="Склад"><span> Персонал</span></a>
</div>


var menuText = document.getElementById("menuItems").getElementsByTagName("a");
    for(var i in menuText){
        var element = menuText[i];
        var text = element.getElementsByTagName("span")[0];
       text.style.display = isMenuShort ? "none" : "inline";
    }   

元素不是列表。我做错了什么？

还有我的帖子

Answer 1

Use for-loop instead of for-in loop to iterate array or array-like collection.

for-in 循环迭代可枚举属性 -

• 0
• 1
• 2
• 长度
• 项目
• 命名项目

因此，循环被迭代 6 次，menuText 的 getElementsByTagName(0, 1, 2 除外)为未定义。

另请参阅"Why is using “for…in” with array iteration a bad idea?"

var menuText = document.getElementById("menuItems").getElementsByTagName("a");
for (var i = 0; i < menuText.length; i++) {
  var element = menuText[i];
  var text = element.getElementsByTagName("span")[0];
  console.log(text);
}

<div id="menuItems">
  <a href="#"><img src="package.svg" alt="Склад"><span> Склад</span></a>
  <a href="#"><img src="report.svg" alt="Склад"><span> Отчеты</span></a>
  <a href="#"><img src="worker.svg" alt="Склад"><span> Персонал</span></a>
</div>