如何遍历所有注释节点，并进行DOM操作！

[chen_2016_web]

如题，先看看HTML代码:

<div id="code">
    <!--第一个注释节点-->
    <!--第一个注释节点-->
    //第二个注释节点
    //第二个注释节点
    /*第三个注释节点*/
    /*第三个注释节点*/
    /*第三个注释节点*/
</div>

经过JS或JQ遍历后，在页面显示，如下内容:

    <!--第一个注释节点-->
    <!--第一个注释节点-->
    //第二个注释节点
    //第二个注释节点
    /*第三个注释节点*/
    /*第三个注释节点*/
    /*第三个注释节点*/

并且，每个注释节点添加span标签，是每个注释节点都要添加。
F12下可以看见:

<div id="change">
    <span><!--第一个注释节点--></span>
    <span><!--第一个注释节点--></span>
    <span><!--第一个注释节点--></span>
    <span><!--第一个注释节点--></span>
    <span><!--第一个注释节点--></span>
    <span>//第二个注释节点</span>
    <span>//第二个注释节点</span>
    <span>/*第三个注释节点*/</span>
    <span>/*第三个注释节点*/</span>
    <span>/*第三个注释节点*/</span>
</div>

#change是装生成的节点的容器。

[囧]

window.onload = function(){
	var code = document.querySelector("#code").innerHTML;
	var change = document.createElement("div");
	change.id = "change";
	var reg = /<!--[\s\S]*?-->|\/\/.*?$|\/\*[\s\S]*?\*\//img;
	code = code.replace(reg, x => "<span>" + x + "</span>");
	change.innerHTML = code;
	document.body.appendChild(change);
};

[chen_2016_web]

引用 1 楼 Free_Wind22 的回复:

window.onload = function(){
	var code = document.querySelector("#code").innerHTML;
	var change = document.createElement("div");
	change.id = "change";
	var reg = /<!--[\s\S]*?-->|\/\/.*?$|\/\*[\s\S]*?\*\//img;
	code = code.replace(reg, x => "<span>" + x + "</span>");
	change.innerHTML = code;
	document.body.appendChild(change);
};

想问一下，这里的x => "<span>" + x + "</span>"是什么意思？ES6？

[chen_2016_web]

引用 1 楼 Free_Wind22 的回复:

window.onload = function(){
	var code = document.querySelector("#code").innerHTML;
	var change = document.createElement("div");
	change.id = "change";
	var reg = /<!--[\s\S]*?-->|\/\/.*?$|\/\*[\s\S]*?\*\//img;
	code = code.replace(reg, x => "<span>" + x + "</span>");
	change.innerHTML = code;
	document.body.appendChild(change);
};

想问一下，这里的x => "<span>" + x + "</span>"是什么意思？ES6？这里还有一个问题，HTML的注释没有显示出来，也就是页面要显示<!--第一个注释节点-->。

[chen_2016_web]

引用 1 楼 Free_Wind22 的回复:

window.onload = function(){
	var code = document.querySelector("#code").innerHTML;
	var change = document.createElement("div");
	change.id = "change";
	var reg = /<!--[\s\S]*?-->|\/\/.*?$|\/\*[\s\S]*?\*\//img;
	code = code.replace(reg, x => "<span>" + x + "</span>");
	change.innerHTML = code;
	document.body.appendChild(change);
};

自己解决了，谢谢！····