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';
  }
}

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

2 个答案: