element.firstChild is returning '

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:

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

Then, on page load, I get dropped into this method:

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

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

The rest of the code does not matter at this point because it never gets called. tabContainer is set properly to reference the div with the ID tabs. Now, in Internet Explorer when I call tabContainer.firstChild the variable 'tabs' is referencing my UL and then the call var tab = tabs.firstChild; references my first LI. The problem is that when I call tabContainer.firstChild Venkman is telling me it is returning . So firefox is reading my newlines as actual children inside the div's! My UL is actually the second child in the childNodes collection!

Is there any way to fix this?

Thanks!

score 25 · Accepted Answer · answered Feb 19 '10 at 21:57

25

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

answered Feb 19 '10 at 21:57

Christian C. Salvadó

807,428
183
922
838

3

In the function `getFirstChild` I would check for `firstChild.nodeType != 1` instead of `firstChild.nodeType == 3` in order to skip also other node types such as comments. – Cito Dec 03 '12 at 22:15
This answer should be updated to the @Cito change suggested, I just encountered a developer that copied this exact code, and sure enough there was an HTML comment before the first element node that was being searched for... and thus failed. – scunliffe Apr 05 '17 at 19:19
@CMS why should TextNodes be skipped? because it's empty space in a dom? – Roxy'Pro Jan 11 '19 at 10:18
@Roxy'Pro: Yes, the blank spaces are text-nodes for more info [check this](https://medium.com/@patrickbrosset/b90e8a7cdd33) – Christian C. Salvadó Jan 15 '19 at 18:13

score 19 · Answer 2 · answered Feb 19 '10 at 21:56

19

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

answered Feb 19 '10 at 21:56

Max Shawabkeh

37,799
10
82
91

score 8 · Answer 3 · answered Jan 12 '16 at 16:08

8

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>

answered Jan 12 '16 at 16:08

CoderPi

12,985
4
34
62

No up votes on this, any reason this isn't the solution? – Joel Mar 30 '16 at 16:43
3

@Joel I added the answer 6 years later, maybe thats why :) – CoderPi Mar 31 '16 at 18:46

score 2 · Answer 4 · edited Nov 23 '13 at 00:21

2

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

edited Nov 23 '13 at 00:21

BenMorel

34,448
50
182
322

answered Oct 14 '10 at 11:58

Marco Demaio

33,578
33
128
159

score 2 · Answer 5 · answered Aug 11 '17 at 14:29

2

You can try

document.getElementById(TabContainer).firstElementChild;

instead of firstChild

answered Aug 11 '17 at 14:29

B.Nabeih

151
1
12

score 0 · Answer 6 · answered Feb 19 '10 at 21:58

0

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
}

answered Feb 19 '10 at 21:58

Rouan van Dalen

748
4
14

3

While frameworks are nice, they are not a luxuary I am currently afforded to use. Thanks for the solution though! – dparsons Feb 20 '10 at 01:33
1

Although I love jQuery, it's hard to fit it into a bookmarklet! – Shalom Craimer Nov 27 '12 at 06:01

element.firstChild is returning '

6 Answers6

Linked