显示childNodes NodeList的最简单方法? (初学者)

时间:2015-09-11 05:52:22

标签: javascript arrays dom nodes

我正在尝试浏览DOM树并检索html注释并在警告框中显示它们。这是我能得到的,我的警报箱一直空着。如何正确显示nodeList数组?我搜索了几个小时,似乎无法找到任何有意义的信息。

<!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>

1 个答案:

答案 0 :(得分:0)

您可以选择带有正则表达式的注释字符串,如下所示

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

然后你可以修剪每个字符串的前4个和后3个字母

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

最终结果是这样的

<!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>

顺便说一句,你应该把你的h1标签放在身体内而不是头部。