element.firstChild正在返回'<TextNode ...'而不是FF中的Object

我用一些非常基本的Javascript編寫了一個選項卡系統，它在IE 8中像冠軍一樣運行，但在FireFox 3中，。該pertitent HTML如下：element.firstChild正在返回'<TextNode ...'而不是FF中的Object

  <div id="tabs"> 
       <ul class="tabs"> 
        <li class="current"><a><span>News</span></a></li> 
        <li><a><span>Videos</span></a></li> 
        <li><a><span>Photos</span></a></li> 
        <li><a><span>Twitter</span></a></li> 
       </ul> 
      </div>

然後，在頁面加載時，我得到投進這個方法：

function processTabs(TabContainer, PageContainer, Index) { 
var tabContainer = document.getElementById(TabContainer); 
var tabs = tabContainer.firstChild; 

var tab = tabs.firstChild; 
var i = 0; 
.... more code }

代碼在這一點無關緊要的休息，因爲它永遠不會被調用。 tabContainer已正確設置爲使用ID選項卡引用div。現在，在我調用tabContainer.firstChild的Internet Explorer中，變量「tabs」引用我的UL，然後調用var tab = tabs.firstChild;引用我的第一個LI。問題是，當我打電話給tabContainer.firstChild Venkman告訴我它正在返回。所以Firefox正在閱讀我的換行符，作爲div內的實際兒童！我的UL實際上是childNodes集合中的第二個孩子！

有什麼辦法解決這個問題嗎？

謝謝！

來源

2010-02-19 dparsons

您應該跳過TextNodes，一個簡單的功能，可以幫助您：

function getFirstChild(el){ 
    var firstChild = el.firstChild; 
    while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes 
    firstChild = firstChild.nextSibling; 
    } 
    return firstChild; 
}

用法：

var tabContainer = document.getElementById(TabContainer); 
var tabs = getFirstChild(tabContainer);

來源

2010-02-19 21:57:46 CMS

做得很好，像魅力一樣工作！ – dparsons 2010-02-20 01:33:08

在函數'getFirstChild'中，我會檢查'firstChild.nodeType！= 1'而不是'firstChild.nodeType == 3'，以便跳過其他節點類型，如註釋。 – Cito 2012-12-03 22:15:08

這個答案應該更新爲建議的@Cito更改，我剛剛遇到了一個複製了此確切代碼的開發人員，並且確實在正搜索的第一個元素節點之前存在HTML註釋。並因此失敗。 – scunliffe 2017-04-05 19:19:31

您可以使用node.firstElementChild忽略前導文本，或者使用類似jQuery的庫來處理此問題。

來源

2010-02-19 21:56:57

node.firstElementChild僅支持在FF 3.5，所以我還是風與在舊版本中的問題。在我的情況下，jQuery不是一個選項。上面的CMS的帖子解決了這個問題。 – dparsons 2010-02-22 12:31:51

我會建議任何人試圖在JavaScript中的DOM工作使用像圖書館jquery。它會讓你的生活更輕鬆。

然後，您可以重寫JS功能休耕：

function processTabs(TabContainer, PageContainer, Index) { 
    var tabContainer = document.getElementById(TabContainer); 

    // jquery used to find all the <li> elements 
    var tabs = $(tabContainer).filter('li'); 

    // use the jquery get(index) function to retrieve the first tab 
    var tab = tabs.get(0); 
    var i = 0; 
    .... more code 
}

來源

2010-02-19 21:58:17

雖然框架很好，但它們並不是我目前使用的luxuary。感謝解決方案！ – dparsons 2010-02-20 01:33:38

雖然我喜歡jQuery，但很難將其納入書籤！ – scraimer 2012-11-27 06:01:39

隨着也對效率產生的眼睛，這個函數返回EL

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

來源

2010-10-14 11:58:49

@yckart：謝謝你的解決，這是完全錯誤的。 – 2013-06-05 17:50:03

使用element.querySelector("*")拿到第一的則firstChild元素節點子元素。

演示：

var container = document.getElementById("container") 
 

 
console.log(container.querySelector("*")) // <div>This is a test</div> 
 
console.log(container.firstChild) // #text 
 
console.log(container.childNodes[0]) // #text

<div id="container"> 
 
    <div>This is a test</div> 
 
</div>

來源

2016-01-12 16:08:23 CoderPi

沒有對此投票，任何理由，這不是解決方案？ – Joel 2016-03-30 16:43:59

@Joel 6年後我添加了答案，也許多數民衆贊成在爲什麼:) – CoderPi 2016-03-31 18:46:14

您可以嘗試

document.getElementById(TabContainer).firstElementChild;

，而不是firstChild

來源

2017-08-11 14:29:40

element.firstChild正在返回'<TextNode ...'而不是FF中的Object

回答

相關問題