element.firstChild restituisce '<TextNode ...' invece di un oggetto in FF

Question

Ho scritto un sistema di tabulazione utilizzando un Javascript molto semplice e funziona come un campione in IE 8 ma, in FireFox 3 sto arrivando in breve . Il codice HTML pertitent è la seguente:

  <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> 

Poi, al caricamento della pagina, si disconnette in questo metodo:

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

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

Il resto del codice non importa a questo punto perché non è mai viene chiamato . tabContainer è impostato correttamente per fare riferimento al div con le schede ID. Ora, in Internet Explorer quando chiamo tabContainer.firstChild la variabile 'tabs' fa riferimento alla mia UL e quindi alla variabile var call = tabs.firstChild; fa riferimento alla mia prima LI. Il problema è che quando chiamo tabContainer.firstChild Venkman mi sta dicendo che sta tornando. Quindi Firefox sta leggendo le mie nuove righe come veri bambini all'interno del div! Il mio UL è in realtà il secondo figlio della collezione childNodes!

C'è un modo per risolvere questo problema?

Grazie!

Answer 1

Si dovrebbe saltare la TextNodes, una semplice funzione può aiutare:

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

Usage:

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

Answer 2

È possibile utilizzare node.firstElementChild per ignorare il testo principale o utilizzare una libreria come jQuery che si occupa di questo.

Answer 3

Consiglierei a chiunque cercando di lavorare con il DOM in javascript per usare una libreria come jquery. Renderà la tua vita molto più facile.

È quindi possibile riscrivere la funzione di JS come Fallows:

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 
} 

Answer 4

Con un occhio anche su efficienza, questa funzione restituisce firstChild nodo elemento di el

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

Answer 5

Usa element.querySelector("*") per ottenere la prima elemento figlio.

Demo:

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>

Answer 6

Si può provare

document.getElementById(TabContainer).firstElementChild; 

invece di firstChild