DOMTool

DOMTool is a script that will create the W3C DOM statements using the HTML that is given as the input. For example,

Input

<div class="box" id="sites">
<h3>Sites</h3>
<ul><li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.wired.com">Wired</a></li>
<li><a href="http://www.slashdot.org">Slashdot</a></li>
<li><a href="http://tech.memeorandum.com/">tech.memeorandum</a></li>
</ul></div>

Output

var div1=document.createElement('DIV');
div1.setAttribute('id','sites');
div1.className='box';
var h31=document.createElement('H3');
div1.appendChild(h31);
var txt1=document.createTextNode('Sites');
h31.appendChild(txt1);
var ul1=document.createElement('UL');
div1.appendChild(ul1);
var li1=document.createElement('LI');
ul1.appendChild(li1);
var a1=document.createElement('A');
a1.setAttribute('href','http://www.digg.com');
li1.appendChild(a1);
var txt1=document.createTextNode('Digg');
a1.appendChild(txt1);
var li2=document.createElement('LI');
ul1.appendChild(li2);
var a2=document.createElement('A');
a2.setAttribute('href','http://www.wired.com');
li2.appendChild(a2);
var txt1=document.createTextNode('Wired');
a2.appendChild(txt1);
var li3=document.createElement('LI');
ul1.appendChild(li3);
var a3=document.createElement('A');
a3.setAttribute('href','http://www.slashdot.org');
li3.appendChild(a3);
var txt1=document.createTextNode('Slashdot');
a3.appendChild(txt1);
var li4=document.createElement('LI');
ul1.appendChild(li4);
var a4=document.createElement('A');
a4.setAttribute('href','http://tech.memeorandum.com/');
li4.appendChild(a4);
var txt1=document.createTextNode('tech.memeorandum');
a4.appendChild(txt1);

This has the potential to be a very useful tool. Creating DOM structures is much more easier if you use it. The only problem is the need for a separate script to do this. If you have to make a DOM node, you have to create an HTML, then go to this page and generate the DOM and then come back and insert the code into the page. It would be much easier if we made this a function...

createDOM('<div class="box" id="sites"> ... </div>');

I am sure that somebody is working on such a script right now. If no one is, I might take a whack at it myself.

Read more about the DOMTool
blog comments powered by Disqus