Is it possible to get reference to comment element/block by JavaScript?

Question

This sounds a little crazy, but I'm wondering whether possible to get reference to comment element so that I can dynamically replace it other content with JavaScript.

<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<!-- sidebar place holder: some id-->
</body>
</html>

In above page, can I get reference to the comment block and replace it with some content in local storage?

I know that I can have a div place holder. Just wondering whether it applies to comment block. Thanks.

It would be far easier, and more efficient, to use a unique ID as a placeholder. If there's not a convenient element where you need it, create an empty <div> or <span> and assign your ID to that. — Blazemonger
– Blazemonger, Commented Mar 17, 2015 at 19:43
The problem with <div> and <span> is they can interfere with CSS selectors and may end up taking up visible space or affecting the flow of content etc. - my solution was to use <script> tags instead, see my answer below. — mindplay.dk
– mindplay.dk, Commented Mar 23, 2016 at 9:45
Doesn't sound crazy at all. I'm working on an HTML templating system, and this is exactly what I need to do also. — KWallace
– KWallace, Commented Jun 10, 2021 at 14:44
How about using the "meta" element with "itemprop" attribute?? — mnemotronic
– mnemotronic, Commented Nov 14, 2022 at 18:48

Benjamin Gruenbaum · Accepted Answer · 2015-01-12 23:58:58Z

43

var findComments = function(el) {
    var arr = [];
    for(var i = 0; i < el.childNodes.length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType === 8) {
            arr.push(node);
        } else {
            arr.push.apply(arr, findComments(node));
        }
    }
    return arr;
};

var commentNodes = findComments(document);

// whatever you were going to do with the comment...
console.log(commentNodes[0].nodeValue);

edited Jan 12, 2015 at 23:58

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

answered May 17, 2011 at 8:24

hyperslug

3,6431 gold badge31 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Morgan Cheng Over a year ago

Thanks. But the traverse of DOM tree must cost a lot. So, we'd better don't use comment as place holder.

Buksy Over a year ago

There is a Node.COMMENT_NODE constant that you can use to test for commentar instead of 8

Cristopher Over a year ago

Node.COMMENT_NODE is not defined in ie8. If that's a target for you, keep the number 8.

mindplay.dk · Accepted Answer · 2016-03-23 09:40:42Z

21

It seems there are legitimate (performance) concerns about using comments as placeholders - for one, there's no CSS selector that can match comment nodes, so you won't be able to query them with e.g. document.querySelectorAll(), which makes it both complex and slow to locate comment elements.

My question then was, is there another element I can place inline, that doesn't have any visible side-effects? I've seen some people using the <meta> tag, but I looked into that, and using that in <body> isn't valid markup.

So I settled on the <script> tag.

Use a custom type attribute, so it won't actually get executed as a script, and use data-attributes for any initialization data required by the script that's going to initialize your placeholders.

For example:

<script type="placeholder/foo" data-stuff="whatevs"></script>

Then simply query those tags - e.g.:

document.querySelectorAll('script[type="placeholder/foo"]')

Then replace them as needed - here's a plain DOM example.

Note that placeholder in this example isn't any defined "real" thing - you should replace that with e.g. vendor-name to make sure your type doesn't collide with anything "real".

answered Mar 23, 2016 at 9:40

mindplay.dk

7,4593 gold badges50 silver badges60 bronze badges

1 Comment

Kamil Szot Over a year ago

Another good tag to use as placeholder might be <template> or <font> or any custom tag like <my-boundary-marker>.

mems · Accepted Answer · 2020-12-11 16:09:56Z

11

There is an API for document nodes traversal: Document#createNodeIterator():

var nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_COMMENT
);

// Replace all comment nodes with a div
while(nodeIterator.nextNode()){
    var commentNode = nodeIterator.referenceNode;
    var id = (commentNode.textContent.split(":")[1] || "").trim();
    var div = document.createElement("div");
    div.id = id;
    commentNode.parentNode.replaceChild(div, commentNode);
}

#header,
#content,
#some_id{
  margin: 1em 0;
  padding: 0.2em;
  border: 2px grey solid;
}

#header::after,
#content::after,
#some_id::after{
  content: "DIV with ID=" attr(id);
}

<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<!-- sidebar placeholder: some_id -->
</body>
</html>

Edit: use a NodeIterator instead of a TreeWalker

edited Dec 11, 2020 at 16:09

answered Mar 7, 2017 at 15:31

mems

1,2741 gold badge19 silver badges29 bronze badges

7 Comments

fregante Over a year ago

Not sure of why you changed it to use NodeIterator over TreeWalker since the difference is minimal and it only exists if the nodes move

Victor Over a year ago

very interesting! I didn't know those API exist.

mems Over a year ago

@bfred.it NodeIterators are more node oriented vs TreeWalkers are more hierachy oriented. See Document Object Model Traversal. NodeIterator is more adapted for that task There is no API difference (for looping over nodes from top to bottom), maybe perform better?

Keith Shaw Over a year ago

TreeWalker is fastest in Chrome 80 and Safari 13. NodeIterator is fastest in Firefox 73. Both are at least one order of magnitude faster than a stack or recursion. jsperf.com/getcomments/6

Oleg V. Volkov Over a year ago

Your filter function is essentially a no-op and can be safely removed.

|

Joseph Lennox · Accepted Answer · 2020-02-16 19:05:38Z

Building off of hyperslug's answer, you can make it go faster by using a stack instead of function recursion. As shown in this jsPerf, function recursion is 42% slower on my Chrome 36 on Windows and 71% with IE11 in IE8 compatibility mode. It appears to run about 20% slower in IE11 in edge mode but faster in all other cases tested.

function getComments(context) {
    var foundComments = [];
    var elementPath = [context];
    while (elementPath.length > 0) {
        var el = elementPath.pop();
        for (var i = 0; i < el.childNodes.length; i++) {
            var node = el.childNodes[i];
            if (node.nodeType === Node.COMMENT_NODE) {
                foundComments.push(node);
            } else {
                elementPath.push(node);
            }
        }
    }

    return foundComments;
}

Or as done in TypeScript:

public static getComments(context: any): Comment[] {
    const foundComments = [];
    const elementPath = [context];
    while (elementPath.length > 0) {
        const el = elementPath.pop();
        for (let i = 0; i < el.childNodes.length; i++) {
            const node = el.childNodes[i];
            if (node.nodeType === Node.COMMENT_NODE) {
                foundComments.push(node);
            } else {
                elementPath.push(node);
            }
        }
    }

    return foundComments;
}

Eylon Sultan · Accepted Answer · 2021-02-01 16:05:44Z

3

Using document.evaluate and xPath:

function getAllComments(node) {
    const xPath = "//comment()",
        result = [];

    let query = document.evaluate(xPath, node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    for (let i = 0, length = query.snapshotLength; i < length; ++i) {
        result.push(query.snapshotItem(i));
    }

    return result;
}

getAllComments(document.documentElement);

from my testing, using xPath is faster than treeWalker: https://jsben.ch/Feagf

edited Feb 1, 2021 at 16:05

answered Feb 1, 2021 at 14:46

Eylon Sultan

1,05610 silver badges17 bronze badges

Comments

Michael_Scharf · Accepted Answer · 2014-10-31 03:49:09Z

2

If you use jQuery, you can do the following to get all comment nodes

comments = $('*').contents().filter(function(){ return this.nodeType===8; })

If you only want the comments nodes of the body, use

comments = $('body').find('*').contents().filter(function(){
     return this.nodeType===8;
 })

If you want the comment strings as an array you can then use map:

comment_strings = comments.map(function(){return this.nodeValue;})

answered Oct 31, 2014 at 3:49

Michael_Scharf

34.8k23 gold badges79 silver badges99 bronze badges

Comments

Keith Shaw · Accepted Answer · 2020-02-14 23:02:43Z

If you just want to get an array of all comments from a document or part of a document, then this is the most efficient way I've found to do that in modern JavaScript.

function getComments (root) {

    var treeWalker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_COMMENT,
        {
            "acceptNode": function acceptNode (node) {
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );

    // skip the first node which is the node specified in the `root`
    var currentNode = treeWalker.nextNode();

    var nodeList = [];
    while (currentNode) {

        nodeList.push(currentNode);
        currentNode = treeWalker.nextNode();

    }

    return nodeList;

}

I am getting over 50,000 operations per second in Chrome 80 and the stack and recursion methods both get less than 5,000 operations per second in Chrome 80. I had tens of thousands of complex documents to process in node.js and this worked the best for me.

https://jsperf.com/getcomments/6

Yair Levy · Accepted Answer · 2018-05-30 09:26:52Z

This is an old question, but here's my two cents on DOM "placeholders" IMO a comment element is perfect for the job (valid html, not visible, and not misleading in any way). However, traversing the dom looking for comments is not necessary if you build your code the other way around.

I would suggest using the following method:

Mark the places you want to "control" with markup of your choice (e.g a div element with a specific class)

<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>

Find the placeholders the usual way (querySelector/classSelector etc)

var placeholders = document.querySelectorAll('placeholder');

Replace them with comments and keep reference of those comments:

var refArray = [];

[...placeholders].forEach(function(placeholder){ var comment = document.createComment('this is a placeholder'); refArray.push( placeholder.parentNode.replaceChild(comment, placeholder) ); });

at this stage your rendered markup should look like this:

<!-- this is a placeholder -->
<!-- this is a placeholder -->
<!-- this is a placeholder -->
<!-- this is a placeholder -->
<!-- this is a placeholder -->

Now you can access each of those comments directly with your built refArray and do whatevere it is you wanna do... for example:

replace the second comment with a headline

let headline = document.createElement('h1'); headline.innerText = "I am a headline!"; refArray[1].parentNode.replaceChild(headline,refArray[1]);

Aral Roca · Accepted Answer · 2024-02-15 21:17:54Z

0

I recommend to use the createTreeWalker and a custom filter inside:

function findCommentNode(commentText) {
    return document
    .createTreeWalker(
      document.querySelector('html'),
      128, /* NodeFilter.SHOW_COMMENT */
      {
          acceptNode:  (node) => node.textContent.trim() === commentText.trim()
            ? 1 /* NodeFilter.FILTER_ACCEPT */
            : 2 /* NodeFilter.FILTER_REJECT */
      }
    )
    .nextNode();
}

Then:

const node = findCommentNode('some comment')

answered Feb 15, 2024 at 21:17

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

Collectives™ on Stack Overflow

Is it possible to get reference to comment element/block by JavaScript?

9 Answers 9

3 Comments

1 Comment

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related