arraydom - An elegant weapon for a more civilized HTML
Consider HTML as a simple tree of JavaScript arrays.
(This API is not exactly what's currently implemented; it's partly thinking out loud about how to make the interface better.)
Converts back and forth between these two representations:
Arraydom Example Page Page Title Lorem Ipsem! and
'html' 'head' 'title' 'Arraydom Example Page' 'body' 'h1' 'Page Title' 'hr' 'p alert' 'style.border': '3px solid blue' 'Lorem Ipsem!' 'img' src: 'https://pixabay.com/static/uploads/photo/2015/11/26/17/39/cat-1064225_960_720.jpg' width: 400 conventions
Each node is an array:
- The first item is a string like
'div container', containing the element tagname and then optionally values for the class attribute. - The second item may be an attributes object. If there are no attributes, it may be omited.
- The remaining items are either strings, numbers, or other nodes. They are the content of this element.
So <div a="b">foo</div>" is ['div', {a:'b'}, 'foo']
Because there are several different ways to write things (like putting classes in the first item string or in the attributes object), it's best to treat nodes as raw structures when creating them, but read them with functions like arraydom.tag, arraydom.attr, and arraydom.forEachChild. (TODO)
pseudo-attributes
All attributes with names like style.foo (or $foo TODO) are merged
together to form the HTML style attribute of the element.
Attributes with names starting with _ are omitted during conversion
to HTML. (TODO)
The special attribute _inherit links to another attribute object
(recursively) where attributes should be looked for if not found.
This helps factor out bits that are repeated in lots of element's
attributes. This might sometimes be better than style sheets. (TODO)
pseudo-elements
*wrapper for when your content isn't a proper tree. (TODO: make this work at every level, not just the root, as kind of a disappearing-div) (TODO: rename from document)
*comment to represent HTML comments <!-- ... -->
*pi to represent processing instructions like ?xml and !DOCTYPE (TODO: rename from processinginstruction).
Functions
arraydom.toHTML(node)
arraydom.toIndentedHTML(node) tries to cleverly figure out a nice indenting, where that wont mess up the content. Basically, if an element contains any text children, it's assumed that spacing matters. (TODO: currently uses options to toHTML)
arraydom.fromHTML(string)
arraydom.fromMarkdown(string)
arraydom.fromDOM(element) (TODO)
arraydom.toDOM(node) and then you'll have to attach the result (TODO)
arraydom.attr(node, attrName) returns the value of the attribute from this node. Looks in node[1], but also in node[0] for class and id, and follows the _inherit chain (TODO)
arraydom.children(node) (TODO)
arraydom.forEachChild(node, cb) slightly more efficient than children()
arraydom.walk(node, func) calls func on each node in the tree rooted at node (TODO)
arraydom.find(keywords, node, func) like walk, but filtered by keywords, which are the words in a node[0] string. That is: arraydom.find('.foo .bar', tree, f) will call f on every node which has class foo or class bar. If you want and instead of or, run find on one of the keywords and check for the others inside f. (TODO)
Command line (if installed with -g)
(TODO: current two different scripts)
$ arraydom < some-input-fileor
$ arraydom some-input-fileSniffs the input to see if it's json, html, or markdown. converts to either json or html.