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

Groups > comp.lang.javascript > #34693

Re: A simpler DOM in JS

From Martin Honnen <martin.honnen@gmx.de>
Newsgroups comp.lang.javascript
Subject Re: A simpler DOM in JS
Date 2018-02-04 14:26 +0100
Organization Liberty Development
Message-ID <p571ms$ido$1@news.albasani.net> (permalink)
References <fb9172c3-3151-46c7-815d-b4535c60fe7d@googlegroups.com>

Show all headers | View raw

On 03.02.2018 23:24, Michael Haufe (TNO) wrote:

> 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? Here's what we have to contend with for the equivalent:
> 
> <script type="JavaScript">
>    var root = document.createElement("root")
> 
>    for(var i = 1; i <= 6; i++) {
>      var child = document.createElement("child" + i)
>      child.textContent = i
>      root.appendChild(child)
>    }
> 
>    console.log(root.outerHTML)
> </script>
> 
> And that is for a very trivial use-case.
> 
> My proposal is that a library be created to promote the approach of System.XML.LINQ to the HTML DOM. The result being not simply the emulation of the C# example but additionally the ability to warn of deprecated attribute usage and illegal compositions such as placing a button element inside of an option element.

But why whould a HTML DOM allow you to create elements named "Root" or 
"Child1" at all? An odd example at least.

And the LINQ object model has at least one flaw with its lack of 
representation of prefixes in XName that makes lexical representations 
of trees dependent on the implementation strategy to choose prefixes e.g.

             XNamespace xhtml = "http://www.w3.org/1999/xhtml";

             XElement html = new XElement(xhtml + "html",
                 new XElement(xhtml + "body",
                    new XElement(xhtml + "p", "This is a test.")));

             Console.WriteLine(html);

outputs

<html xmlns="http://www.w3.org/1999/xhtml">
   <body>
     <p>This is a test.</p>
   </body>
</html>

and if we add a namespace declaration attribute and output the tree again

            html.Add(new XAttribute(XNamespace.Xmlns + "xhtml", xhtml));

            Console.WriteLine(html);

we now get

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <xhtml:body>
     <xhtml:p>This is a test.</xhtml:p>
   </xhtml:body>
</xhtml:html>

so suddenly all the generated qualified names of the elements have that 
prefix.

I agree the W3C DOM is ugly, in particular with all those different 
levels it has and the whole factory based approach and I am glad to have 
class based alternatives like XOM or JDOM in the Java world or XLINQ in 
the .NET world.

But part of the power of XLINQ (both for composition (your initial 
example could be shortened to

   var root = new XElement("Root",
     from i in Enumerable.Range(1, 6) select new XElement("Child" + i, i)
   );

) and for querying of trees) is due to the integration with LINQ and not 
solely based on its node creation API using constructors instead of 
factory methods.

I liked E4X and I think it would have worked had there been a DOM 
integration but as far as I remember that never happened.

Whether browser-side JS needs another library based API for node 
creation I am not sure, it looks like most people are happy with 
throwing there string fragments into JQuery.

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