Как работать с Firefox, вставляя текстовые элементы между тегами

Question

Я пытаюсь написать javascript, чтобы найти элементы страницы относительно данного элемента, используя parentNode, firstChild, nextSibling, childNodes [] и так далее. Firefox все испортил, вставив текстовые узлы между каждым html-элементом. Я читал, что я могу победить это, удалив все пробелы между элементами, но я пробовал это, и это не работает. Есть ли способ написать код, который работает во всех современных браузерах?

Например:

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

В IE parent.firstChild является дочерним, но в Firefix это фантомный элемент Text.

Answer 1

Вы должны убедиться, что nodeType == 1.

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

Я написал небольшой класс обхода DOM для вас (в основном скопированный из MooTools). Скачать здесь: http://gist.github.com/41440

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

Answer 2

У меня есть обходной путь. Вы можете вставить два метода ниже:

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;

Answer 3

Проверьте ссылку на ядро ​​ DOM уровня 2 , чтобы увидеть различные возможные типы узлов, чтобы можно было отфильтровать нежелательные узлы с помощью простого фрагмента JavaScript. Одно из решений состоит в том, чтобы обезьяна пропатчить объект (см. Ответ Вернихта), или, если вам не нравится патч обезьяны, вы можете добавить эти методы в свою собственную библиотеку, или еще лучшим решением может быть использование необычной библиотеки, например jQuery или прототип.

Answer 4

вы можете использовать tagName, чтобы проверить имя тега. Если значение не определено, то это ваш фантомный текстовый узел.

например. function getFirstTag(node) { return ((node.firstChild.tagName) ? node.firstChild : node.firstChild.nextSibling); }