Dom node creator??

[shachi]

Hello all,
Some time ago I came across this great tool(at least now I think so) called Dom node creator or something, at that time I thought what's the use of it but now I have to have it. Ok let me explain what it did.

If you have something like this:

<div id="test">
<div id="test2"></div>
</div>

it converted this to:

body = document.body;
div1 = document.createElement('div');
div2 = document.createElement('div');
div1.id = "test1";
div2.id = "test2";
div1.appendChild(div2);
body.appendChild(div1);

Or something similar. Has anyone(except me of course) has seen this kind of script and still have the link to it?? If you do then Please Please help me with this. Thanks a lot.

[jscheuer1]

I'm not really clear on what you are asking for. I suppose a javascript could be written that inspects the DOM of the page and when placed in the head of a page could output a script to create that page using the DOM, and display it in a text area or pop up window. Is that what you want? If so, when I am really bored sometime, I may write it. I tried Googling for something like it but, I need to narrow and or refine my search terms.

[shachi]

Yes, it's exactly something like that. Thanks jscheuer1.

I need it so that when you enter this:

<div id="test">
<div id="test2"></div>
</div>

It outputs(in a textarea):

body = document.body;
div1 = document.createElement('div');
div2 = document.createElement('div');
div1.id = "test1";
div2.id = "test2";
div1.appendChild(div2);
body.appendChild(div1);

In it's complete dom structure(even styles must be converted or just an attribute could be enough).

I couldn't find anything like that on google too(though I have seen and used something like that some time ago).

I hope you get what I am looking for.

[jscheuer1]

Well I started playing around with this and came up with the following code:

var c=1, bd=[];
function DOM_b (node){
var bd1='', bdom=node? node.childNodes : document.body.childNodes;
for (var i_tem = 0; i_tem < bdom.length; i_tem++){
if(bdom[i_tem].tagName){
bdom[i_tem].id=bdom[i_tem].id? bdom[i_tem].id : 'new#id'+c++;
bd1+='\nvar '+bdom[i_tem].tagName.toLowerCase()+bdom[i_tem].id+'=document.createElement(\''+bdom[i_tem].tagName.toLowerCase()+'\');\n'; //'\n<'+bdom[i_tem].tagName+' '+'id="'+bdom[i_tem].id+'"' +'>\n';
for (var i = 0; i < bdom[i_tem].attributes.length; i++)
if(bdom[i_tem].attributes[i].value.length>0&&bdom[i_tem].attributes[i].value!=='null')
bd1+=bdom[i_tem].tagName.toLowerCase()+bdom[i_tem].id+'.'+bdom[i_tem].attributes[i].name+'="'+bdom[i_tem].attributes[i].value+'";\n';
if(bdom[i_tem].outerHTML&&document.body.filters){
var y=bdom[i_tem].innerHTML
var x=bdom[i_tem].outerHTML.replace(y, '').split('"');
for (var j = 0; j< x.length; j++)
if (x[j].indexOf('STYLE')>-1||x[j].indexOf('style')>-1)
bd1+='style="'+x[j+1]+'"\n';
}
}
if(bdom[i_tem].childNodes)
DOM_b(bdom[i_tem]);
}
if(node&&bd1!=='')
bd[bd.length]='// '+node.tagName+' '+'id="'+node.id+'"'+' children:\n'+bd1;
else if (bd1!==''){
bd[bd.length]= '// body children:\n'+bd1;
var report=document.createElement('textarea');
report.value=bd.join('\n');
report.rows=50;
report.cols=80;
report.setAttribute('wrap', 'off', 0);
document.body.appendChild(report);
//return bd.join('\n');
}
}
onload=function(){DOM_b();};

If there are other scripts on the page that use the onload, you could append this as the last onload event, or skip its onload call and just type this into the address bar:

javascript:void(DOM_b())

and hit enter.

Notes: This is a poor man's DOM inspector at best for the moment but, by editing the code a bit more I think I (or others) could get it pretty close to what you are asking for. It works better in the more standards compliant browsers like Opera and FF.

[jscheuer1]

Ok, here it is, at least a beta version. Simply put this:

<script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/DOM_b.js">
/*DOM_b - HTML page body generation script
 *creation Wizard © John Davenport Scheuer
 *Visit http://www.dynamicdrive.com/forums
 *user name:jscheuer1 - This notice must remain for legal use */
</script>

as the last thing on your page, just above the </body> tag. It will write out the page's on page style sheets (if any) followed by a script to write out the page's body using the DOM. This will appear in a textarea at the bottom of the page's normally positioned content (absolutely and relatively positioned content may overlap).

Select all and paste it into the head of an otherwise blank page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

</body>
</html>

and it will recreate the source page via the DOM.

Best in Firefox. Works pretty well in Opera and IE too. Untested in others. May have some bugs to work out. If you have other scripts in the body of a page you try this with, the results will be mixed as far as those scripts go, especially poor in IE. Best to find another way of dealing with scripts in the body (if any). It does work very well in the above three browsers with a variety of HTML markups I tested it with.

[shachi]

Oh Thanks jscheuer1, I think that you must submit this script to the DD once you are done. And thanks again for the script I must test it now. And it would be better if you could tell me how to use it(I mean how to place it in my html because when I tried it it doesn't show anything except a blank page. HTML included below)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/DOM_b.js">
/*DOM_b - HTML page body generation script
 *creation Wizard &#169; John Davenport Scheuer
 *Visit http://www.dynamicdrive.com/forums
 *user name:jscheuer1 - This notice must remain for legal use */
</script>
</head> 
<body> 
</body> 
</html>

[jscheuer1]

It shows nothing because there is nothing to show. You should use the script at the bottom of a page that you want to generate a DOM script for, one with some content on it. Once you run it on a page like that, it will generate the DOM script for that page. Then you take this newly generated script and past that into your blank page's head to recreate the source page via the DOM.

Try this very simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
<p>Hi</p>
<script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/DOM_b.js">
/*DOM_b - HTML page body generation script
 *creation Wizard © John Davenport Scheuer
 *Visit http://www.dynamicdrive.com/forums
 *user name:jscheuer1 - This notice must remain for legal use */
</script>
</body> 
</html>

It should generate a script like so, or equivalent (depending upon the browser):

<script type="text/javascript">

/*This DOM - HTML page body generation script was created using
 *DOM_b - Page Body Generator Script Creation Wizard © John Davenport Scheuer
 *Visit http://www.dynamicdrive.com/forums
 *user name:jscheuer1 - This notice must remain for legal use.  */

/*Run on Browser reported as: Opera®,
 *userAgent: Opera/9.01 (Windows NT 5.1; U; en),
 *vendor: NA
 *Edited (yes/no)? No - If yes, by:?
 *This notice must remain for legal use.  */

function domit(){

// p ident="_node_1" children:
var text0=document.createTextNode("Hi");

// body children:

var p_node_1=document.createElement('p');

//appending elements:

p_node_1.appendChild(text0);
document.body.appendChild(p_node_1);
}
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", domit, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", domit );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            domit();
        };
    }
    else
        window.onload = domit;
}
</script>

It is this new script that gets pasted to the head of a blank page.

[shachi]

jscheuer1: Can't you make it so that it only translates the user inputted data instead of creating the dom node for the whole page??

[jscheuer1]

I suppose but, I like it better this way because you have to view the content in the browser - as you've written it - in order to generate the DOM script for it. This very act will help weed out errors that could easily creep in otherwise.

Also, as it stands now, if you write invalid code, if there is a chance that the browser can parse it, you may still get a valid DOM script generated.

In any case, what you are talking about would be a completely different script as, it wouldn't be parsing the DOM, just some text input. For this reason, I would think that it would either have to be very basic and ignore many possible attributes and styles for the nodes, or be incredibly complex to allow for any possibility. I'm not certain of this last bit though, so will kick the idea around a bit more.

[mwinter]

... I think that you must submit this script to the DD once you are done.

On principle, I would say that's not a good idea. The DOM shouldn't be used to insert large amounts of content into a document. Rather, it should be used to manipulate the structure of existing content. If you still want to do it anyway, use the innerHTML property and be done with it. It might even be more efficient and compatible.

Mike


Nothing against what you've written, John. This is about usage, not quality.