element.firstChild 返回 '<TextNode ...' 而不是 FF 中的对象 [英] element.firstChild is returning '<TextNode ...' instead of an Object in FF

问题描述

我使用一些非常基本的 Javascript 编写了一个选项卡系统，它在 IE 8 中运行起来就像冠军一样，但是，在 FireFox 3 中，我做得不够.相关的 HTML 如下:

 
<ul class="tabs"><li class="current"><a><span>新闻</span></a></li><li><a><span>视频</span></a></li><li><a><span>照片</span></a></li><li><a><span>推特</span></a></li>

然后，在页面加载时，我进入了这个方法:

function processTabs(TabContainer, PageContainer, Index) {var tabContainer = document.getElementById(TabContainer);var tabs = tabContainer.firstChild;var tab = tabs.firstChild;变量 i = 0;.... 更多代码 }

其余代码此时无关紧要，因为它永远不会被调用.tabContainer 设置正确以引用带有 ID 选项卡的 div.现在，在 Internet Explorer 中，当我调用 tabContainer.firstChild 时，变量tabs"引用了我的 UL，然后调用 var tab = tabs.firstChild;参考我的第一个 LI.问题是，当我调用 tabContainer.firstChild 时，Venkman 告诉我它正在返回.所以 Firefox 正在阅读我的换行符作为 div 中的实际孩子！我的 UL 实际上是 childNodes 集合中的第二个孩子！

有什么办法可以解决这个问题吗?

谢谢！

解决方案

你应该跳过TextNodes，一个简单的函数可以帮助你:

function getFirstChild(el){var firstChild = el.firstChild;while(firstChild != null && firstChild.nodeType == 3){//跳过 TextNodesfirstChild = firstChild.nextSibling;}返回第一个孩子；}

用法:

var tabContainer = document.getElementById(TabContainer);var tabs = getFirstChild(tabContainer);

I wrote a tab system using some very basic Javascript and it runs like a champ in IE 8 but, in FireFox 3 I am coming up short. The pertitent HTML is as follows:

            <div id="tabs">
                <ul class="tabs">
                    <li class="current"><a><span>News</span></a></li>
                    <li><a><span>Videos</span></a></li>
                    <li><a><span>Photos</span></a></li>
                    <li><a><span>Twitter</span></a></li>
                </ul>
            </div>

Then, on page load, I get dropped into this method:

function processTabs(TabContainer, PageContainer, Index) {
var tabContainer = document.getElementById(TabContainer);
var tabs = tabContainer.firstChild;

var tab = tabs.firstChild;
var i = 0;
.... more code }

The rest of the code does not matter at this point because it never gets called. tabContainer is set properly to reference the div with the ID tabs. Now, in Internet Explorer when I call tabContainer.firstChild the variable 'tabs' is referencing my UL and then the call var tab = tabs.firstChild; references my first LI. The problem is that when I call tabContainer.firstChild Venkman is telling me it is returning . So firefox is reading my newlines as actual children inside the div's! My UL is actually the second child in the childNodes collection!

Is there any way to fix this?

Thanks!

解决方案

You should skip the TextNodes, a simple function can help you:

function getFirstChild(el){
  var firstChild = el.firstChild;
  while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes
    firstChild = firstChild.nextSibling;
  }
  return firstChild;
}

Usage:

var tabContainer = document.getElementById(TabContainer);
var tabs = getFirstChild(tabContainer);

这篇关于element.firstChild 返回 '<TextNode ...' 而不是 FF 中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！