VCore DOM

Introduction to the DOM node creation method in VCore

View the method here

Let's start with an example. This paragraph

<p class="text-center">Hello world!</p>

is written as

/** regular */

V.castNode( {
      tag: 'p',
      class: 'txt-center',
      html: 'Hello world!',
    } );

/** shorthand */

V.cN( {
      t: 'p',
      c: 'txt-center',
      h: 'Hello world!',
    } );

/** using variables */

const textContent = 'Hello world!';

V.cN( {
      t: 'p',
      c: 'txt-center',
      h: textContent,
    } );

Here is an advanced example. This SVG

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
  <path d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z">
    <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite"></animateTransform>
  </path>
</svg>

is written as

V.cN( {
      svg: true,
      t: 'svg',
      c: 'spinner',
      a: {
        width: '18',
        height: '18',
        viewBox: '0 0 50 50',
      },
      h: [
        {
          svg: true,
          t: 'path',
          a: {
            d: 'M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z',
          },
          h: {
            svg: true,
            t: 'animateTransform',
            a: {
              attributeName: 'transform',
              type: 'rotate',
              from: '0 25 25',
              to: '360 25 25',
              dur: '0.7s',
              repeatCount: 'indefinite',
            },
          },
        },
      ],
    } );

Nested Nodes

/** a single nested node  */

V.cN( {
      t: 'p',
      c: 'txt-center',
      h: {
         t: 'span',
         c: 'blue',
         h: 'Hello world!',
        },
    } );

/** several nested nodes  */

V.cN( {
      t: 'p',
      c: 'txt-center',
      h: [
        {
         t: 'span',
         c: 'blue',
         h: 'Hello world!',
        },
        {
         t: 'span',
         c: 'green',
         h: 'Plant more trees!',
        },
        ...
      ]
    } );

/** nested nested nodes  */

V.cN( {
      t: 'div',
      h: {
         t: 'p',
         h: {
            t: 'span',
            h: 'Plant more trees!',
          },
        },
    } );

Main method (the node constructor):

V.castNode( object ) or V.cN( object )

The object and its keys

tags [t, tag]

{
 t: 'div' or tag: 'div' // 'p', 'span', 'button', 'somecustomtag', etc ...
}

classes [c, class, classes]

{
 c: 'blue center' or class: 'blue' or classes: 'blue center'
}

content [h, html]

<div>the stuff that goes here</div>

String-type will use textContent and create text, an Object-type will create a nested node.

{
 h: 'Hello World' or html: 'Hello World'
}

or

{
 h: {
  t: 'div'
  h: 'A nested node'
 }
}

attributes [a, attribute, attributes]

The attribute key calls .setAttribute and can therefore be used to add any attribute. It's a "catch-all", to use especially for those attributes that do not have their own key defined here (like 'class').

{
 a: {
   type: 'checkbox',
   checked: true
 }
}