如何處理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