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

Question

我想通过使用parentNode，firstChild，nextSibling，childNodes []等来编写javascript来查找相对于给定元素的页面元素。 Firefox通过在每个html元素之间插入文本节点来解决这个问题。我读过，我可以通过删除元素之间的所有空白来打败这一点，但我已经尝试过，并且不起作用。有没有办法编写适用于所有现代浏览器的代码？

例如：

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

在IE parent.firstChild是孩子，但在Firefix它是一个幽灵文本元素。

Answer 1

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

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 2

您可以使用tagName来检查标记的名称。如果未定义，那么这是你的'幽灵'文本节点。

例如

 
function getFirstTag(node) { 
    return ((node.firstChild.tagName) ? node.firstChild : node.firstChild.nextSibling); 
} 

Answer 3

检查DOM level 2 core reference看到各种可能类型的节点，所以你可以用一个简单的JavaScript代码片段过滤掉不需要的。一种解决方案是猴子修补对象（请参阅Vernicht的答案），或者如果您不喜欢猴子修补，那么您可以将这些方法添加到您自己的库中，或者更好的解决方案可能是使用像jQuery这样的花哨库原型。

Answer 4

你必须检查的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