element.firstChild is returning '<TextNode …' instead of an Object in FF

Question

I wrote a tab system using some very basic Javascript and it runs like a champ in IE 8 but, in FireFox 3 I am coming up short. The pertitent HTML is as follows:

<         


        

Answer 1

You can try

document.getElementById(TabContainer).firstElementChild;

instead of firstChild

Answer 2

I would recommend anyone trying to work with the DOM in javascript to use a library like jquery. It will make your life much easier.

You could then rewrite the JS function as 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 3

You should skip the TextNodes, a simple function can help you:

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 4

You can use node.firstElementChild to ignore leading text, or use a library like jQuery which takes care of this.

Answer 5

With a an eye also on efficiency, this function returns firstChild element node of el

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

Answer 6

Use element.querySelector("*") to get the first child Element.

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>