element.firstChild返回'<TextNode ...'而不是FF中的Object

Question

我使用一些非常基本的Javascript编写了一个标签系统,它在IE 8中像一个冠军一样运行但是,在FireFox 3中,我即将推出.相关的HTML如下:

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

然后,在页面加载时,我被放入这个方法:

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

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

其余的代码在这一点上并不重要,因为它永远不会被调用.tabContainer已正确设置为使用ID选项卡引用div.现在,在我调用tabContainer.firstChild的Internet Explorer中,变量'tabs'引用我的UL,然后调用var tab = tabs.firstChild; 引用我的第一个LI.问题是,当我调用tabContainer.firstChild时,Venkman告诉我它正在返回.所以firefox正在读取我作为div中真实孩子的新行!我的UL实际上是childNodes集合中的第二个孩子!

有没有什么办法解决这一问题？

谢谢!

Answer 1

你应该跳过TextNodes,一个简单的功能可以帮助你:

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

用法:

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

Answer 2

您可以使用node.firstElementChild忽略前导文本,或使用像jQuery这样的库来处理这个问题.

Answer 3

使用element.querySelector("*")获得的第一个子元素.

演示:

var container = document.getElementById("container")

console.log(container.querySelector("*")) // <div>This is a test</div>
console.log(container.firstChild) // #text
console.log(container.childNodes[0]) // #text

<div id="container">
  <div>This is a test</div>
</div>