Table of Contents

Dom

Hop supports the DOM interface on both client and server. The client-side DOM is complete. The server-side DOM is under development and slightly differs from the client-side DOM as the server does not implement a unique document. As a consequence, an XML element can be simultaneously contained in various XML nodes. On the server, Inserting and a node in a document does not not automatically removes it from another parent where it could been included initially, then the nextSibling, previousSibling, and parentNode properties cannot be used with non arborescent structures.

Examples

This example shows how to use the client-side DOM of a document created on the server.

dom/dom.js

var hop = require( 'hop' );

service dom() {
   var el = <ul><li>foo</li><li>bar</li><li>gee</li></ul>;
   
   return <html>
      <div>
        ${el}
        <button onclick=~{
           var c0 = ${el}.childNodes[ 0 ];
           var c1 = ${el}.childNodes[ 1 ];

           ${el}.removeChild( c0 );
           ${el}.appendChild( c0 );
        }>rotate</button>
      </div>
   </html>;
}

console.log( "Go to \"http://%s:%d/hop/dom\"", hop.hostname, hop.port );

Node attributes

node.id

The id of the node.

node.nodeType

Return an integer value which specifies the type of the node; possible values are listed in Node type constants.

node.childNodes

The children of the node in an array.

node.className

The class of the node.

node.innerHTML

Set or get the HTML syntax describing the element's descendants.

node.nextSibling

The next sibling of the node.

node.outerHTML

The serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.

node.parentNode

The parent of the node or undefined if the node is not contained in a document.

node.previousSibling

The previous sibling of the node.

node.tagName

The tag name of the node.

Node methods

node.appendChild( child )

Add a new child to node.

node.removeChild( child )

Remove a new child to node.

node.getElementById( id )

Return the child of node whose id is id.

node.getElementsByTagName( name )

Return the children of node whose tag matches name.

Note: On the server, this method is supported by all nodes. Contrary to the client that only supports it for the document object.

node.getElementsByClassName( name )

Return the children of node whose class contains name.

Note: On the server, this method is supported by all nodes. Contrary to the client that only supports it for the document object.