GetElementsByTagName Does Not Return Comment Nodes In Javascript

Question

I want to retrieve all the nodes present in particular DIV element.see the below test page (firefox) New Document

Solution 1:

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

Solution 2:

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:

Baca Juga

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

Solution 3:

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

Solution 4:

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.

Solution 5:

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

JavaScript OfficialSite