Simplest method for showcasing NodeList of childNodes? (Novice level)

Question

Simplest method for showcasing NodeList of childNodes? (Novice level)

Currently, I am exploring the DOM tree to retrieve HTML comments and showcase them in an alert box. However, I seem to be stuck as my alert box is always empty. Can someone guide me on how to properly display a nodeList array? I have spent hours searching for a solution but nothing seems to make sense.

<!DOCTYPE html>
<html>
<head>
    <title>Hidden Comments</title>
    <h1 style="text-align:center">Hidden Comments</h1>
    <script>
        function concatComs(){
            var c=document.getElementById('body');
            var array=[];
            for(var i=0;c.childNodes.length<i;i++){
                if(c.childNodes[i].nodeType==8) array[i]=c[i];   
            }
            alert(array.toString());
        }
    </script>
</head>
<body id="body" style="text-align: center">
    <!--you-->
    <h2>Find the hidden comments!</h2>
    <p>Look closely and you'll find them!</p><!--found-->
    <input type="button" value="Go!" onClick="concatComs()"/> 
    <!--them-->
</body>
</html>

javascript arrays dom nodes

Answer 1

Answer №1

To enhance your for loop, initiate it as follows:

for(var i=0; i < c.childNodes.length; i++){

Moreover, consider including c.childNodes[i] in your array.

function combineComments(){
    var c = document.getElementById('body');
    var array=[];
    for(var i=0; i < c.childNodes.length; i++){
        if(c.childNodes[i].nodeType==8) {
            array.push(c.childNodes[i]);
        }
    }
    var result = "";
    for(i in array) {
        result += array[i].textContent + " ";
    }
    document.write(result);
}

<div id="body" style="text-align: center">
    <!--you-->
    <h2>Uncover the hidden comments!</h2>
    <p>Observe closely to find them!</p><!--found-->
    <input type="button" value="Go!" onClick="combineComments()"/> 
    <!--them-->
</div>

Answer 2

To enhance your for loop, initiate it as follows:

for(var i=0; i < c.childNodes.length; i++){

Moreover, consider including c.childNodes[i] in your array.

function combineComments(){
    var c = document.getElementById('body');
    var array=[];
    for(var i=0; i < c.childNodes.length; i++){
        if(c.childNodes[i].nodeType==8) {
            array.push(c.childNodes[i]);
        }
    }
    var result = "";
    for(i in array) {
        result += array[i].textContent + " ";
    }
    document.write(result);
}

<div id="body" style="text-align: center">
    <!--you-->
    <h2>Uncover the hidden comments!</h2>
    <p>Observe closely to find them!</p><!--found-->
    <input type="button" value="Go!" onClick="combineComments()"/> 
    <!--them-->
</div>

Answer 3

Answer №2

If you want to extract comment strings using a regex expression, you can use the following:

match(/<!--.*?-->/g)

You can then remove the first 4 and last 3 characters from each string with this code:

substr(4,comments[i].length-7)

The final result will look like this:

<!DOCTYPE html>
<html>
<head>
    <title>Hidden Comments</title>    
    <script>
        function concatComs(){            
            var comments = document.body.innerHTML.match(/<!--.*?-->/g);

            for (var i = 0; i < comments.length; i++) 
                comments[i] = comments[i].substr(4,comments[i].length-7);

            alert(comments);
        }
    </script>
</head>
<body id="body" style="text-align: center">
    <h1 style="text-align:center">Hidden Comments</h1>
    <!--you-->
    <h2>Find the hidden comments!</h2>
    <p>Look closely and you'll find them!</p><!--found-->
    <input type="button" value="Go!" onClick="concatComs()"/> 
    <!--them-->
</body>

</html>

By the way, remember to place your h1 tag inside the body tag instead of the head tag.

Answer 4

If you want to extract comment strings using a regex expression, you can use the following:

match(/<!--.*?-->/g)

You can then remove the first 4 and last 3 characters from each string with this code:

substr(4,comments[i].length-7)

The final result will look like this:

<!DOCTYPE html>
<html>
<head>
    <title>Hidden Comments</title>    
    <script>
        function concatComs(){            
            var comments = document.body.innerHTML.match(/<!--.*?-->/g);

            for (var i = 0; i < comments.length; i++) 
                comments[i] = comments[i].substr(4,comments[i].length-7);

            alert(comments);
        }
    </script>
</head>
<body id="body" style="text-align: center">
    <h1 style="text-align:center">Hidden Comments</h1>
    <!--you-->
    <h2>Find the hidden comments!</h2>
    <p>Look closely and you'll find them!</p><!--found-->
    <input type="button" value="Go!" onClick="concatComs()"/> 
    <!--them-->
</body>

</html>

By the way, remember to place your h1 tag inside the body tag instead of the head tag.

Simplest method for showcasing NodeList of childNodes? (Novice level)

Answer №1

Answer №2

Similar questions

The Mystery of Socket.io Random Disconnects (version 1.0.6)

When iterating through HTML Elements using the forEach method, the getElementsByClassName function is not capable of targeting these specific elements

The navigation bar in React Router is interfering with the loading of other components

Fixing the "Parsing error: Parenthesized pattern" issue using vanilla JavaScript

The de-duplication feature in webpack is not functioning properly when the splitChunks cacheGroups commons option is activated

Exploring multidimensional JSON arrays with the jQuery each() method

Issue encountered with the URL for the image in a JSON file following the utilization of multer for image uploads in a Node.js

Executing HTML code upon reaching the index.php page

Conceal flexbox item depending on neighboring element dimensions or content

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

Triple the number of arrays stored in MongoDB

What is the best way to store a personalized configuration for a user within a Node module?

sending data with JavaScript and AJAX to a PHP file

Prevent the event from spreading down to the child elements

PHP - Retrieve a portion of an array

Overlap of Interval Lists

Why doesn't Mongoose automatically generate an _id for my array elements when I push them in?

Exploring the bounds of self-invocation functions in JavaScript

Stop the primary router-view from being altered