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("*")获取第一个子元素。

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

同时关注效率，此函数返回el

的firstChild元素节点

function firstChildElement(el)
{
    el = el.firstChild;
    while (el && el.nodeType !== 1)
       el = el.nextSibling;
    return el;
}

Answer 5

我建议任何尝试使用javascript中的DOM来使用像jquery这样的库的人。它会让你的生活更轻松。

然后你可以将JS函数重写为fallows：

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

    // jquery used to find all the <li> elements
    var tabs = $(tabContainer).filter('li');

    // use the jquery get( index ) function to retrieve the first tab
    var tab = tabs.get(0);
    var i = 0;
    .... more code
}

element.firstChild正在返回'

5 个答案: