DOMDom: More DOM, Less DOM
Zach Leatherman has created another DOM creation class, DOMDom, (with support for HTML Fragments) that uses
the CSS query language. But instead of using the language to query nodes, it is used to create nodes.
To make <div style=”width:100%;border:1px solid blue” class=”testClass”><a href=”http://www.google.com/”><span>Google</span></a></div>, you’d have to do the following in other packages:
DomHelper:
JAVASCRIPT:
-
-
Ext.DomHelper.append( myDiv, {
-
tag: ‘div’,
-
style: ‘width:100%;border:1px solid blue;’,
-
cls: ‘testClass’,
-
children: [{
-
tag: ‘a’,
-
href: ‘http://www.google.com/’,
-
children: [{
-
tag: ’span’,
-
html: ‘Google’
-
}]
-
}]
-
} );
-
jQuery’s FlyDom:
JAVASCRIPT:
-
-
$( myDiv ).createAppend(
-
‘div’, { style: ‘width:100%;border:1px solid blue;’, class: ‘testClass’ }, [
-
‘a’, { href: ‘http://www.google.com/’ }, [
-
’span’, {}, ‘Google’
-
]
-
]
-
);
-
This can be achieved in DOMDom, with comparable speed and code size with the following descriptor:
JAVASCRIPT:
-
-
DOMDom.append( { ‘div[style="width:100%;border:1px solid
-
blue",class="testClass"] a[href="http://www.google.com/"] span’:
-
‘#Google’ }, myDiv );
-
Currently works with YUI, but it will probably be ported to jQuery and other libraries.
(Via Ajaxian.)
