javascript - JavaScript：无法访问 nodeList 的一次迭代的 childNode

Question

鉴于此标记：

<ul id="navtabs">
  <li><a onClick="someFunction();" href="#">Link</a></li>
  <li><a onClick="someFunction();" href="#">Link</a></li>
</ul>

这个功能：

function someFunction(){
  navList=document.getElementById('navtabs').childNodes;
  for(i=0;i<navList.length;i++){
    navList[i].childNodes[0].className='fgf';
  }
}

我的期望是每个锚的类都发生了变化，但是，当函数运行时，我得到：

Error: navList[i].childNodes[0] is undefined

当我使用：

navList[i].className='fgf';

代替上面的代码，列表项的类名按预期更改。

如上函数所示，如何通过循环访问 childNode 的 childNode？

谢谢你。

Answer 1

childNodes可能会为您提供文本节点以及 dom 元素，这就是您收到该错误的原因。在您的循环中，navList[i]有时是一个没有自己的子节点的文本节点，这当然navList[i].childNodes[0]是为什么undefined

而不是使用childNodes你可以做

navList=document.getElementById('navtabs').children;

只获取子元素。但我建议更具体getElementsByTagName

function someFunction() {
    navList = document.getElementById('navtabs').getElementsByTagName("li");
    for(i = 0; i < navList.length; i++){
        navList[i].getElementsByTagName("a")[0].className='fgf';
    }
}

Answer 2

您正在寻找<a>元素子项-

function someFunction(){
  var navList=document.getElementById('navtabs').getElementsByTagName('a');
  for(i=0;i<navList.length;i++){
    navList[i]className='fgf';
  }
}