element.firstChild powraca "<TextNode ..." zamiast obiektu w FF

Question

Napisałem system kart za pomocą bardzo prostego kodu JavaScript i działa jak mistrz w IE 8, ale w FireFox 3 podchodzę krótko . Pertitent HTML jest następujący:

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

Następnie na stronie obciążenia, mam spadł do tej metody:

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

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

Reszta kodu nie ma znaczenia w tym momencie, ponieważ nigdy nie jest wywoływana . tabContainer jest ustawiony prawidłowo, aby odwoływać się do elementu div za pomocą zakładek ID. Teraz w Internet Explorerze, gdy wywołuję tabContainer.firstChild, zmienna "tabs" odwołuje się do mojego UL, a następnie wywołuje var tab = tabs.firstChild; odnosi się do mojego pierwszego LI. Problem polega na tym, że kiedy dzwonię do tabContainer.firstChild Venkman mówi mi, że powraca. Tak więc firefox czyta moje nowe linie jako rzeczywiste dzieci w div! Mój UL jest w rzeczywistości drugim dzieckiem w kolekcji childNodes!

Czy można to naprawić?

Dzięki!

Answer 1

Należy pominąć TextNodes, prosta funkcja może pomóc:

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

Zastosowanie:

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

Answer 2

Możesz użyć node.firstElementChild, aby zignorować wiodący tekst, lub użyć biblioteki takiej jak jQuery, która się tym zajmuje.

Answer 3

Polecam każdemu stara się pracować z DOM w javascript, aby korzystać z biblioteki jak jquery. To znacznie ułatwi ci życie.

Następnie można przepisać funkcji JS sposób następujący:

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

Z myślą również o efektywności, funkcja ta zwraca firstChild elementu węzła El

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

Answer 5

Korzystanie element.querySelector("*") dostać pierwszy element dziecka.

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

Można spróbować

document.getElementById(TabContainer).firstElementChild; 

zamiast firstChild