JavaScript：无法访问节点列表一次迭代的子节点

发布于 2025-01-08 12:28:22 字数 721 浏览 1 评论 0原文

给定这个标记：

<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？

谢谢。

原文

Given this markup:

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

and this function:

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

my expectaction is that the class of each anchor is changed, however, when the function runs I get:

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

When I use:

navList[i].className='fgf';

in lieu of the above code, the class name of the list item is changed as expected.

How can i access the childNode of the childNode through the loop as seen in the above function?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里的微风 2025-01-15 12:28:22

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

childNodes is likely giving you text nodes as well as dom elements, which is why you're getting that error. In your loop, navList[i] is at times a text node with no children of its own, which is of course why navList[i].childNodes[0] is undefined

Instead of using childNodes you could do

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

to just get the child elements. But I would recommend being even more specific with getElementsByTagName

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

回复收藏 0 原文

仙女 2025-01-15 12:28:22

您正在寻找元素子元素 -

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

You are looking for <a> element children-

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

回复收藏 0 原文

~没有更多了~