javascript - nextElementSibling/nextSibling 的可移植性

Question

我目前正在编写一个 Accordion 并遇到了与 nextSibling difference between IE and FF? 中描述的相同问题。 - Microsoft 的 nextSibling/nextElementSibling 与其他人实现的之间的具体差异。

出于各种原因，使用 jquery 并不是一种选择。让我所有的 MS 用户升级到 MSIE9 也不是

目前我正在使用以下代码来解决该问题:

// tr is a TR doc element at entry....
while (nthRow--) {
     // for Chrome, FF tr=tr.nextElementSibling; for MSIE...tr=tr.nextSibling;
     tr=tr.nextElementSibling ? tr.nextElementSibling : tr=tr.nextSibling;
     if (!tr || tr.nodeName != "TR") {
            break;
     }
     tr.style.display="";
}

这似乎符合我在 MSIE6、FF 和 Chrome 中的预期 - 即初始 TR 下面的 nthRow TR 元素变得可见(以前的 style.display="none")。

但这可能会产生意想不到的副作用吗？

(我是 Javascript 的新手；)

Answer 1

nextSibling 将看到 HTML 代码注释，因此请务必将它们排除在外。

除此之外，您应该没问题，因为 tr 元素之间不会有任何文本节点。

我能想到的唯一其他问题是在 Firefox 3 中，其中 nextElementSibling 尚未实现。因此，如果您支持该浏览器，则需要手动模拟 nextElementSibling。 (不过很确定他们已经在 FF3.5 中实现了。)

创建 nextElementSibling() 函数会更安全:

tr = tr.nextElementSibling || nextElementSibling(tr);

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