Javascript 如何处理Firefox在标签之间插入文本元素

我试图编写javascript，通过使用parentNode、firstChild、nextSibling、childNodes[]等来查找与给定元素相关的页面元素。Firefox通过在每个html元素之间插入文本节点来搞乱这一点。我已经读到，我可以通过删除元素之间的所有空白来克服这个问题，但我已经尝试过了，但它不起作用。有没有一种方法可以编写适用于所有现代浏览器的代码

例如：

<div id="parent"><p id="child">Hello world</p></div>

你好，世界

---

在IE中，parent.firstChild是child，但在Firefix中，它是幻影文本元素。

您可以使用标记名检查标记名。如果未定义，则这是“幻影”文本节点

e、 g。

函数getFirstTag（节点）{
返回（（node.firstChild.tagName）？node.firstChild:node.firstChild.nextSibling）；
}

我有一个解决办法。您可以插入以下两种方法：

Element.prototype.fChild = function(){
    var firstChild = this.firstChild;
    while(firstChild != null && firstChild.nodeType === 3){
        firstChild = firstChild.nextSibling;
    }
    return firstChild;
 }
 Element.prototype.nSibling = function(){
    var nextSibling = this.nextSibling;
    while(nextSibling != null && nextSibling.nodeType === 3){
        nextSibling = nextSibling.nextSibling;
    }
    return nextSibling;
 }

您现在可以使用：

document.getElementById("parent").fChild();
document.getElementById("parent").nSibling();

而不是：

 document.getElementById("parent").firstChild;
 document.getElementById("parent").nextSibling;

---

检查以查看各种可能的节点类型，这样您就可以使用简单的JavaScript片段过滤掉不需要的节点。一种解决方案是对对象进行monkey patch（参见Vernicht的答案），或者如果您不喜欢monkey patch，则可以将这些方法添加到您自己的库中，或者更好的解决方案可能是使用类似jQuery或prototype的奇特库。

您必须检查节点类型==1

if (el.nodeType === 1) {
    return el;
}

我为ya编写了一个小的DOM遍历类（主要是从MooTools复制的）。 请在此下载：

---

我正在用firebug 1.2.1在我的firefox 3.0.5上测试它，但它没有发生。你用的是哪个版本？但是如果我在标签之间插入一些文字，那就发生了。我以前见过这种情况，但不记得浏览器的品牌/版本。不幸的是，这会在IE上崩溃，毁掉任何跨平台解决方案的希望。当然，这些方法可以作为独立函数使用。通过进一步的工作，我们可以使这些函数在任何浏览器中工作。节点类型应该是1，而不是3。1表示元素，2或undefined表示属性，3表示文本节点。@David Brockman-关于数字的含义您是对的，但代码是对的，因为它避免了不需要的节点类型（3）。

if (el.nodeType === 1) {
    return el;
}

DOM = function () {

    function get(id) {
        if (id && typeof id === 'string') {
            id = document.getElementById(id);
        }
        return id || null;
    }

    function walk(element, tag, walk, start, all) {
        var el = get(element)[start || walk], elements = all ? [] : null;
        while (el) {
            if (el.nodeType === 1 && (!tag || el.tagName.toLowerCase() === tag)) {
                if (!all) {
                    return el;
                }
                elements.push(el);
            }
            el = el[walk];
        }
        return elements;
    }

    return {

        // Get the element by its id
        get: get,

        walk: walk,

        // Returns the previousSibling of the Element (excluding text nodes).
        getPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling');
        },

        // Like getPrevious, but returns a collection of all the matched previousSiblings.
        getAllPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling', null, true);
        },

        // As getPrevious, but tries to find the nextSibling (excluding text nodes).
        getNext: function (el, tag) {
            return walk(el, tag, 'nextSibling');
        },

        // Like getNext, but returns a collection of all the matched nextSiblings.
        getAllNext: function (el, tag) {
            return walk(el, tag, 'nextSibling', null, true);
        },

        // Works as getPrevious, but tries to find the firstChild (excluding text nodes).
        getFirst: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild');
        },

        // Works as getPrevious, but tries to find the lastChild.
        getLast: function (el, tag) {
            return walk(el, tag, 'previousSibling', 'lastChild');
        },

        // Works as getPrevious, but tries to find the parentNode.
        getParent: function (el, tag) {
            return walk(el, tag, 'parentNode');
        },

        // Like getParent, but returns a collection of all the matched parentNodes up the tree.
        getParents: function (el, tag) {
            return walk(el, tag, 'parentNode', null, true);
        },

        // Returns all the Element's children (excluding text nodes).
        getChildren: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild', true);
        },

        // Removes the Element from the DOM.
        dispose: function (el) {
            el = get(el);
            return (el.parentNode) ? el.parentNode.removeChild(el) : el;
        }

    };
}();



// Now you can do:
DOM.getFirst("parent") // first child
// or
DOM.getFirst("parent", "p") // first p tag child
// or
var el = DOM.get("parent") // get element by id
DOM.getFirst(el) // first child