dom

dom

Source:

Build XML/HTML from Javascript objects based on JsonML:

dom(["html", {"lang":"en"},
      ["head",
        ["title", "Page title"]
      ],
      ["body.page",
        ["h1", "Page title"],
        ["button", { "onclick":showTextContent }, "Hello, world!"]
      ]
    ]);
function showTextContent(event) { alert(event.target.textContent); }

<html lang="en">
  <head>
    <title>Page title</title>
  </head>
  <body class="page">
    <h1>Page title</h1>
    <button onclick="alert(this.textContent)">Hello, world!</button>
  </body>
</html>

Extended with the following features:

  • allow CSS syntax for class name and id:
    • ["tag.class#id"] →
      <tag class="class" id="id"/>
    • ["tag.class1.class2"] / ["tag class1 class2"] →
      <tag class="class1 class2"/>
  • support namespaces using a prefix map ['svg:path',...] vs. ['path',...] with
    ns = { "svg":"http://www.w3.org/2000/svg" };
    There is no namespace scoping, but you can specify the default namespace in the namespace map with an empty string:
    ns = { "":"http://www.w3.org/2000/svg" };
  • create a DocumentFragment if the tag name is the empty string ""
  • accept Node objects as first child in array: then the node is used instead of created new, and the rest of the array, attributes and children, are added to it (brilliant idea taken from https://github.com/adius/shaven )
  • accept as text content apart from strings also numbers, booleans and other objects that are not arrays or nodes
  • accept as node children DOM Nodes using document.adoptNode() if needed
  • if an attribute has as name the empty string, its value must be a function that will be called as function (element) after the element has been built

It does not include a templating mechanism but you can build your own using the preProcess parameter in dom(jsonml, ns, doc, preProcess).

Namespaces

XPath
Nexus

Methods

(static) dom(jsonml, nsopt, docopt, preProcessopt)

Source:

Create DOM tree/node from extended JsonML input.

Parameters:
Name Type Attributes Description
jsonml

JsonML expression.
ns Object <optional>

namespace map: { prefix: url, ... }, can be null if you do not need XML namespaces, and then you can also omit it if there is no doc argument.
doc Document <optional>

context document if not the current.
preProcess function <optional>

pre-processor for child nodes, a function that receives the child and returns a valid child item. If not specified, it is functionally equivalent to function preProcess(child) { return child; } but more efficient. This is most useful for building your own templating mechanism.

(inner) clear(element) → {Element}

Source:

Clear the element, removing all children. Attributes are not affected.

Parameters:
Name Type Description
element Element

element whose children will be removed.
Returns:

element

Type
Element

(inner) id(id, docopt)

Source:

Get element by ID.

Parameters:
Name Type Attributes Description
id string

identifier to look for.
doc Document <optional>

in which document to look if not the current.

(inner) $(selector, rootopt) → {Node}

Source:

Get element by CSS selector.

Parameters:
Name Type Attributes Description
selector string

CSS selector to look for.
root Document <optional>

in which node to look if not the current document.
Returns:
Type
Node

(inner) $$(selector, rootopt) → {Array.<Node>}

Source:

Get element array by CSS selector.

Parameters:
Name Type Attributes Description
selector string

CSS selector to look for.
root Document <optional>

in which node to look if not the current document.
Returns:
Type
Array.<Node>

(inner) iter(selector, rootopt)

Source:

Get element iterator by CSS selector.

Parameters:
Name Type Attributes Description
selector string

CSS selector to look for.
root Document <optional>

in which node to look if not the current document.
Returns:

node iterator with result.iterateNext() → Element like dom.XPath.iter().

(inner) iterFromArray(array)

Source:

Build iterator from Array or array-like object.

Parameters:
Name Type Description
array Array

the array on which to iterate.
Returns:

item iterator with result.iterateNext() like dom.XPath.iter().

(inner) iterateAsync(iter, forEach, batchFinishedopt, finishedopt)

Source:

Split iteration asynchronously in batches, returning control to the browser between them. This helps to keep the browser/app responsive while iterating over many items. The batch size is adapted after each batch to approximate 1 second processing time.

Parameters:
Name Type Attributes Description
iter iter

the iterator to use; if you have an Array you can convert it with iterFromArray(array).
forEach function

function called for each item: forEach(item)
batchFinished function <optional>

callback for each finished batch, can be null if you do not need it. It receives the batch size as parameter. If you want to stop the loop, return false from this function.
finished function <optional>

callback when the iterator is finished, receives the last batch size as parameter.