I've got a div with two children, one <h2> and one <ul>.

My problem is that when I check .length of my div, by doing document.getElementById('wrap').childNodes.length, I get 5 instead of 2. And if I run console.log on childNodes I get this:

[<TextNode textContent="\n ">, h2, <TextNode textContent="\n ">, ul, <TextNode textContent="\n ">]

My HTML looks like this:

<div id="wrap">
    <h2>Lorem</h2>
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>
</div>

Indenting my code has never before affected the length of the childNodes.

If I type everything on one row (as one long word) I get rid of all <TextNode> and it counts to 2 as it should and not 5.

I've got no idea what's wrong, but I figured I need to remove all empty textnodes. Which way would be the best to do this?

Thanks heaps

Ps. These <TextNode textContent="\n "> occurs all over the document, so I need to remove them all, not only in this particular div.

I've got a div with two children, one <h2> and one <ul>.

My problem is that when I check .length of my div, by doing document.getElementById('wrap').childNodes.length, I get 5 instead of 2. And if I run console.log on childNodes I get this:

[<TextNode textContent="\n ">, h2, <TextNode textContent="\n ">, ul, <TextNode textContent="\n ">]

My HTML looks like this:

<div id="wrap">
    <h2>Lorem</h2>
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>
</div>

Indenting my code has never before affected the length of the childNodes.

If I type everything on one row (as one long word) I get rid of all <TextNode> and it counts to 2 as it should and not 5.

I've got no idea what's wrong, but I figured I need to remove all empty textnodes. Which way would be the best to do this?

Thanks heaps

Ps. These <TextNode textContent="\n "> occurs all over the document, so I need to remove them all, not only in this particular div.

• javascript

• 3 Nothing's wrong. That's exactly what's supposed to happen. – bobince Commented Dec 27, 2009 at 23:36
• but earlier (i checked two other scripts), if i had a div that looked like this, i would get 2 children, and when i used .lastChild i would get 'ul' and not 'textnode'.. to reach the ul i now have to type .childNodes[3] – patad Commented Dec 27, 2009 at 23:47

5 Answers 5

Firefox, right? Firefox will treat whitespace as a textnode. There's nothing you can do about it apart from code around them. Or, you could pletely get rid of all whitespace, but I'm betting that's not an option. It's part of what makes writing webpages so, er, fun :-)

with plain old js, this would be

    function removeEmptyTextNodes(elem){
        var children = elem.childNodes;
        var child;
        var len = children.length;
        var i = 0;
        var whitespace = /^\s*$/;
        for(; i < len; i++){
            child = children[i];
            if(child.nodeType == 3){
                if(whitespace.test(child.nodeValue)){
                    elem.removeChild(child);
                    i--;
                    len--;
                }
            }else if(child.nodeType == 1){
                removeEmptyTextNodes(child);
            }
        }
    }

    removeEmptyTextNodes(document.body);

You don't have to remove any extra text nodes (although there are time when you should - for performance reasons). You should always check for the NodeType when viewing the property ChildNodes.

Here is a link that should help:

http://www.w3/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247

EDIT:

Here is a page that has some prototype code that should help:

http://v3.thewatchmakerproject./journal/329/finding-html-elements-using-javascript-nextsibling-and-previoussibling

Here is the code from the link above:

Object.prototype.nextObject = function() {
    var n = this;
    do n = n.nextSibling;
    while (n && n.nodeType != 1);
    return n;
}

Object.prototype.previousObject = function() {
    var p = this;
    do p = p.previousSibling;
    while (p && p.nodeType != 1);
    return p;
}

childNodes will include text nodes, and particularly empty ones.

I always use the children array, as this only counts elements and not text nodes.

I hope it help:

var listOfNodes=document.getElementById('parentNodeId');
nodeCount=0
for(i=0; i<listOfNodes.childNodes.length;i++){
    if(listOfNodes.childNodes[i].id != undefined){
        console.log(listOfNodes.childNodes[i].id)
        nodeCount++
    }
}
alert(nodeCount)