How to remove comments from the DOM?

brothercake

11-19-2003, 02:03 AM

I'm using Alex's whitespace cleaning method:

//clean whitespace method by Alex Vincent
var notspace = /\S/;
function cleanWhitespace = function(node)
{
for (var x=0; x<node.childNodes.length; x++)
{
var child = node.childNodes[x];
//if it's a whitespace text node
if ((child.nodeType == 3) && (!notspace.test(child.nodeValue)))
{
node.removeChild(node.childNodes[x]);
x--;
}
//elements can have text child nodes of their own
if(child.nodeType == 1)
{
cleanWhitespace(child);
}
}
}

How can it be modified so that it removes comments as well?

liorean

11-19-2003, 02:33 AM

You could look for nodeType 8. I'd recommend you to use a switch statement instead of that if statement.function fnCleanTree(node){
var
i=0,
cNodes=node.childNodes,
t;
while((t=cNodes.item(i++)))
switch(t.nodeType){
case 1: // Element Node
fnCleanTree(t);
break;
case 3: // Text Node
if(notspace.test(t.nodeValue))
break;
case 8: // Comment Node (and Text Node without non-whitespace content)
node.removeChild(t);
i--;
}
}

brothercake

11-24-2003, 11:13 AM

Ta :)

liorean

11-24-2003, 11:56 AM

Oh, this will likely remove the doctype from documents if you're using iew, however. Does that matter in the case you're using it?

brothercake

11-26-2003, 03:33 PM

Yeah actually, it matters a great deal. I suppose I could examine the node text to see if it's a DOCTYPE before removing it (or not) .. unless you know a better way?

liorean

11-26-2003, 04:15 PM

Hmm, some thinking led me some testing. The html:<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html "-//W3C//DTD XHTML 1.1 Strict">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title> Title with extra spaces in it </title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<pre id="prenode"></pre>



<p> <span> hello

</span>
</p>

</body>
</html>
and the script:function fnCleanTree(node){
var
cNodes=node.childNodes,
i=cNodes.length,
t,
reS = /\S/;
while(i-- && (t=cNodes[i]))
switch(t.nodeType){
case 1: // Element Node
fnCleanTree(t);
break;
case 3: // Text Node
if(reS.test(t.nodeValue))
break;
case 8: // Comment Node (and Text Node without non-whitespace content)
node.removeChild(t);
default:
i--;
}
}

window.onload=function(){
fnCleanTree(document.documentElement);
var
i=0,
sDocument='',
sT;
while((sT=document.all[i++])!=document.documentElement)
sDocument+=(sT.outerHTML || sT.text)+'\r\n';
sDocument+=document.documentElement.outerHTML;
document.getElementById('prenode').appendChild(document.createTextNode(sDocument));
}And finally, the output (as written in the browser window):<!DOCTYPE html "-//W3C//DTD XHTML 1.1 Strict">
<HTML xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Title with extra spaces in it</TITLE>
<SCRIPT src="js.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY><PRE id=prenode></PRE>
<P><SPAN>hello </SPAN></P></BODY></HTML>hello
Which gave me the following results:
- You can't iterate over the document itself (of course, since it's not the root node, but the container of it), it has to be a node like document.documentElement which has it's childNodes collection to iterate through, or a collection such as document.all.
- You can't target comment nodes outside of the root node using the DOM. Which means you can't remove the doctype, either.
- You can target nodes outside the root node with document.all, however.