ansaurus

Question

getElementsByTagName does not return comment nodes in javascript

Answer 1

+3 A:

You can use .childNodes to retrieve all children instead of .getElementsByTagName('*') which will only return child elements.

Here is a function to retrieve all descendants of a DOM node:

function getDescendantNodes(node)
{
    var ret = [];
    if( node )
    {
        var childNodes = node.childNodes; 
        for( var i = 0, l = childNodes.length; i < l; ++i )
        {
            var childNode = childNodes[i];
            ret.push(childNode);
            ret = ret.concat(getDescendantNodes(childNode));
        }
    }
    return ret;
}

Usage:

getDescendantNodes(document.getElementById("foo"));

Vincent Robert 2010-05-26 12:05:28

.childNodes works only at single level

Sourabh 2010-05-26 12:12:21

@Sourabh - Then it's time for adventures with recursion!

LeguRi 2010-05-26 12:22:30

added a recursive version to retrieve all descendants of a node

Vincent Robert 2010-05-26 12:40:18

Answer 2

A:

You would need to use the innerHtml and then use a parser to find the comments in it.

Snake 2010-05-26 12:06:04

This is an interesting idea; since comments can't be defined inside themselves, they could probably be exracted/parsed much more easily than fully parsing HTML.

LeguRi 2010-05-26 12:41:52

Answer 3

+1 A:

Node types (non exhaustive):

Element
Text
Comment

getElementsByTagName only picks up Element nodes. childNodes, nextSibling, etc. pick up all kinds of nodes. nextElementSibling only picks up Elements.

Delan Azabani 2010-05-26 12:06:28

Answer 4

A:

Comments are nodes in the DOM tree, but they don't have a tag name. The getElementsByTagName method only returns nodes that have a tag name.

If you want all nodes, you have to traverse the DOM tree, using the childNodes collection of each element.

Guffa 2010-05-26 12:11:02

Answer 5

+2 A:

The heart of the problem is that these methods...

document.getElementById(...)
document.getElementsByTagName(...)

... return elements, as indicated by their names. However, comments and text nodes are not elements. They are nodes, but not elements.

So you need to do some traditional old fashioned DOM scripting, using childNodes like Vincent Robert suggested. Since - as you indicate in your comment to him - that .childNodes only goes one 'layer' deep, you need to define a recursive function to find the comment nodes: (I'm naming mine document.getCommentNodes())

document.getCommentNodes = function() {
    function traverseDom(curr_element) { // this is the recursive function
        var comments = new Array();
        // base case: node is a comment node
        if (curr_element.nodeName == "#comment" || curr_element.nodeType == 8) {
            // You need this OR because some browsers won't support either nodType or nodeName... I think...
            comments[comments.length] = curr_element;
        }
        // recursive case: node is not a comment node
        else if(curr_element.childNodes.length>0) {
            for (var i = 0; i<curr_element.childNodes.length; i++) {
                // adventures with recursion!
                comments = comments.concat(traverseDom(curr_element.childNodes[i]));
            }
        }
        return comments;
    }
   return traverseDom(document.getElementsByTagName("html")[0]);
}

LeguRi 2010-05-26 12:38:23

@Richard: Have you tested this in IE? The MSDN documentation for [childNodes](http://msdn.microsoft.com/en-us/library/ms537445\(v=VS.85\).aspx) states that it only returns HTML elements and TextNode objects via childNodes. The documentation for [nodeType](http://msdn.microsoft.com/en-us/library/ms534191\(v=VS.85\).aspx) corresponds with this, showing the possible values as `1 (Element)` or `3 (TextNode)`. Food for thought...

Andy E 2010-05-26 14:21:14

@Andy E's head - No, I didn't! I took for granted it would work in IE as I'd used something similar to find text nodes before :( Good call.

LeguRi 2010-05-26 14:48:04

Answer 6

A:

If you don't care about IE, you could avoid the recursive approach and possibly improve performance (untested) by using a TreeWalker using document.createTreeWalker:

function getCommentNodes(containerNode) {
    var treeWalker = document.createTreeWalker(containerNode,
        NodeFilter.SHOW_COMMENT, null, false);
    var comments = [];
    while (treeWalker.nextNode()) {
        comments.push(treeWalker.currentNode);
    }
    return comments;
} 

console.log(getCommentNodes(document.body));

Tim Down 2010-05-26 13:22:46

ansaurus

tags:

views:

answers:

getElementsByTagName does not return comment nodes in javascript

related questions