Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34695

Re: A simpler DOM in JS

Show key headers only | View raw

Michael Haufe (TNO) wrote:

> I'm not a fan of JSX, nor was I a fan of E4X before it.

E4X would have made building trees a lot easier, but it had flaws.

> […]
> Dealing with the DOM APIs directly are terribly verbose though as we know.
> Should we not do better?
> 
> In System.XML.LINQ [3] the approach is to construct XML elements and their
> contents by nested constructors:
> 
> <script type="C#">
>   var root = new XElement("Root",
>     new XElement("Child1", 1),
>     new XElement("Child2", 2),
>     new XElement("Child3", 3),
>     new XElement("Child4", 4),
>     new XElement("Child5", 5),
>     new XElement("Child6", 6)
>   );
> 
>   Console.WriteLine(root);
> 
>   /*
>   <Root>
>     <Child1>1</Child1>
>     <Child2>2</Child2>
>     <Child3>3</Child3>
>     <Child4>4</Child4>
>     <Child5>5</Child5>
>     <Child6>6</Child6>
>   </Root>
>   */
> </script>
> 
> Should we not do similar for the dirty DOM we have to deal with?

<https://github.com/PointedEars/JSX/blob/27be459b2da4d2b8052c293d6930d0c020821de4/dom.js#L504-L663>

(The name “JSX” is coincidental; I used it first, but only the people in 
Usenet, SELFHTML.DE, and maybe Twitter, knew about it.)

> Here's what we have to contend with for the equivalent:
> 
> <script type="JavaScript">

Not Valid.

>   var root = document.createElement("root")
> 
>   for(var i = 1; i <= 6; i++) {
>     var child = document.createElement("child" + i)
>     child.textContent = i
>     root.appendChild(child)
>   }

    var root = jsx.dom.createNodeFromObj({
      type: "root",
      childNodes: Array.apply(null, {length: 6}).map(
        (e, i) => {
          return {
            type: "child" + i,
            properties: {textContent: i}
          };
        })
    });

>   console.log(root.outerHTML)

Tested on <http://PointedEars.de/>, which uses JSX:dom.js.

    [<child$i>…</…> is insane markup.]

> [tl;dr]

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-03 14:24 -0800
  Re: A simpler DOM in JS Martin Honnen <martin.honnen@gmx.de> - 2018-02-04 14:26 +0100
    Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-04 06:18 -0800
      Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-05 08:14 -0800
        Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-03-08 00:43 -0800
          Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-08 05:57 -0800
            Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-03-08 07:56 -0800
    Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 06:15 +0100
      Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:15 -0800
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:06 -0800
  Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 05:50 +0100
    Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 06:26 +0100
      Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:33 -0800
        Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 11:19 +0100
          Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-05 04:16 -0800
          Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-05 10:23 -0800
            Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:42 +0100
              Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 01:46 +0100
              Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 01:47 +0100
                Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-11 10:27 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-12 04:38 +0100
                Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-15 12:19 -0800
                Re: A simpler DOM in JS Julio Di Egidio <julio@diegidio.name> - 2018-02-15 12:43 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-25 19:22 +0100
              Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-07 12:51 -0800
                Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-08 02:27 +0100
                Re: A simpler DOM in JS John G Harris <niam@jghnorth.org.uk.invalid> - 2018-02-08 19:21 +0000
            Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:58 +0100
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-04 23:30 -0800
      Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-05 19:11 +0100
        Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-02-11 10:16 -0800
          Re: A simpler DOM in JS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-02-12 04:48 +0100
  Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-05 08:07 -0800
    Re: A simpler DOM in JS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-03-06 17:40 -0800
      Re: A simpler DOM in JS Ken Tilton <kentilton@gmail.com> - 2018-03-07 12:09 -0800

csiph-web