W3C home > Mailing lists > Public > www-dom@w3.org > October to December 2011

Re: [DOM4]: Element.create

From: Charles Pritchard <chuck@jumis.com>
Date: Sat, 01 Oct 2011 13:54:07 -0700
Message-ID: <4E877DEF.2040508@jumis.com>
To: Sean Hogan <shogun70@westnet.com.au>
CC: Dominic Cooney <dominicc@chromium.org>, www-dom@w3.org
On 10/1/11 6:48 AM, Sean Hogan wrote:
> On 1/10/11 12:15 PM, Charles Pritchard wrote:
>
>> They would still include their existing code path, but use the new 
>> method in the polyfill school of programming.
>>
>> Having tried to push this Element.create concept for awhile, I've 
>> change my approach: I'd prefer to overload the JSON object.
>
> You'd have to talk to the Ecmascript designers about the JSON object.

Yeah, I suppose this would violate the DOM boundary setup for Web 
Workers as well.

I'm having a difficult time of this.

The concept has been illustrated in an SVG proposal for some time:
http://www.w3.org/Graphics/SVG/WG/wiki/Simple_SVG_API

That proposal only examines possible uses on SVGElement.
SVG documents use attributes quite a bit, where HTML more often uses CSS.

>> var myDiv = JSON.toNode({div: 'Hello World'});
>> myDiv.outerHTML == '<div>Hello World</div>';
>>
>
> what would the following result in?
>
>     var myFrag1 = JSON.toNode({b: "Hello", i: "World"});
>
>     var myFrag2 = JSON.toNode({b: "Hello", b: "World"});
>
myFrag1.outerHTML == '<b>Hello</b><i>World</i>'; // could be <i> then 
<b> as well.
myFrag2.outerHTML == '<b>World</b>';


>
> how would I create equivalents of the following?
>
> <div>Hello <b>World</b>!</div>

{div: ['Hello', {b: 'World'}, '!']};

>
> <div class="greeting">Hello <b class="target">World</b>!</div>
>

JSON.toNode({div: ['Hello', {b: 'World'}, '!']}).className = 'greeting';

No quick route to b class = "target".

This is just the usual DOM work:

var greeting = JSON.toNode({div: ['Hello', '!']});
greeting.className = 'greeting';
var target = JSON.toNode({b: 'World'});
target.className = 'target';
greeting.firstChild.nextSibling.appendChild(target);

...


The purpose of this work is to do less string manipulation in JS.

Consider these two methods:
JSON.toNode({div: [start, {b: middle}, end]}).className = myGreeting;
parent.innerHTML = ['<div class="',myGreeting, '">', start, 
'<b>',middle,'</b>',end].join('');

Node is a bit of a misnomer if attributes and class names are involved,
as those are part of Element.

This is just an alternative idea for attaching the Element.create method 
we've been discussing.

http://www.w3.org/TR/dom/#element
http://dev.w3.org/2006/webapi/WebIDL/#idl-object

-Charles
Received on Saturday, 1 October 2011 20:54:31 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:08 GMT