element.firstChild retourne '<TextNode ...' au lieu d'un objet en FF

Question

J'ai écrit un système d'onglets en utilisant du Javascript très basique et il fonctionne comme un champion dans IE 8 mais, dans FireFox 3 je suis à court . Le pertitent HTML est comme suit:

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

Ensuite, la charge de la page, je suis tombé dans cette méthode:

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

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

Le reste du code n'a pas d'importance à ce stade, car il ne sera jamais appelé . TabContainer est correctement défini pour référencer la div avec les onglets d'identité. Maintenant, dans Internet Explorer quand je l'appelle tabContainer.firstChild la variable « onglets » fait référence à mon UL puis sur l'onglet appel var = tabs.firstChild; références mon premier LI. Le problème est que quand je l'appelle tabContainer.firstChild Venkman me dit qu'il est de retour. Donc firefox lit mes nouvelles lignes comme des enfants réels à l'intérieur de la div! Mon UL est en fait le deuxième enfant de la collection childNodes!

Y at-il un moyen de résoudre ce problème?

Merci!

Answer 1

Vous devez ignorer la TextNodes, une fonction simple peut vous aider à:

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

Utilisation:

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

Answer 2

Vous pouvez utiliser node.firstElementChild d'ignorer le texte principal, ou utiliser une bibliothèque comme jQuery qui prend soin de cela.

Answer 3

Je recommande tous ceux qui essaient de travailler avec les DOM en javascript pour utiliser une bibliothèque comme jquery. Cela rendra votre vie beaucoup plus facile.

Vous pouvez ensuite réécrire la fonction JS placé comme suit:

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

Avec un oeil aussi sur l'efficacité, cette fonction retourne nœud d'élément firstChild de el

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

Answer 5

Utilisez element.querySelector("*") pour obtenir la première élément enfant.

Démo:

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

Vous pouvez

document.getElementById(TabContainer).firstElementChild; 

au lieu de firstChild