HTML(.js)

HTML document.documentElement

The global HTML is the actual document root element and all element tags queried via the dot operator are descendants.

HTML.tag... Element|Array

HTML allows you to access document elements via their tag name. If multiple elements of the same tag exist, a proper array of elements is returned; otherwise, an Element is returned. Only the first node returned is "HTML-ified" (prepared for further chaining).

HTML.body.header; // returns header element.
HTML.body.header.textContent = "A Better Header!";

HTML.query(selector) Element|Array 0.10.0

HTML.query acts as a proxy for querySelectorAll and returns the selected element(s).

HTML.query("#example"); // single node returned

HTML.query(".example"); // Array of nodes returned if more than one, otherwise a node

HTML.query("#example").h1.em; // chain on, man.

HTML.tag....query(selector) Element|Array 0.10.0

You can, of course, use query on any "HTML-ified" element(s) to search only the children thereof.

HTML.body.div.query(".example"); // contextual search!

HTML.query(selector limit) Element|Array 0.11.0

HTML.query acts as a proxy for querySelector or querySelectorAll (as appropriate) and returns no more than the specified number of selected element(s).

HTML.query("#example", 1); // single node or empty Array returned

HTML.body.query(".example", 5); // returns a single node if only one, otherwise an Array of 0-5 nodes

HTML.tag....each(callback(element,index,array)) Element|Array

Use a the selected element(s) within a closure. Returns the element(s) it was called on.

HTML.query('li').each(function(el, i, all) {
	el.textContent = "Item " + (i+1) + " of " + all.length;
}); // returns li elements

HTML.body.ul.each(function(ul) {// each works on single nodes too
	if (ul.matches('.sunny')) {
	    ul.li.style.background = "blue";
	}
}); // returns the ul

HTML.tag....each(property , arguments...) Element|Array

Get, set, or invoke the specified property of the selected element(s). Returns either an array of retrieved/returned values or the element(s) it was called on.

var items = HTML.body.ul.li;
var texts = items.each('textContent'); // returns array of strings

items.each('id', 'item${i}');// sets the id of each element (replaces ${i} with index)

items.each('click');// calls 'click()' on each element, returns original items

items.each('classList.add', 'foo');// adds 'foo' class to each item's classList, returns original items

HTML.tag....all(property , includeSelf) Element|Array

Recurses through the DOM tree via the specified property, gathering the nodes as it goes to be returned. This makes it easy to gather all an elements ancestors, descendants, next/previous siblings, etc.

var focused = document.activeElement.all('parentElement', true);// returns Array of elements containing the current focus, including the active element.

var first = HTML.body.div.only(0);
var nextAll = first.all('nextElementSibling'); // returns Array of all subsequent sibling elements.

var all = HTML.body.all('children'); // all descendants of the  tag

HTML.tag....only(selector|index|filter|slice , endSlice) Element|Array

When you want to narrow down a selection, only allows you to easily filter that list by selector, index, slice, or filtering function.

var items = HTML.body.ul.li; // all li elements

items.only('.highlighted'); // subset that matches selector

items.only(3).textContent = "Fourth li element!"; // index (single element)

items.only(-1).id = 'last'; // negative index works too

items.only(function(o,i){ return !(i%2); }); // filter function returns even elements

items.only(3, 9).each('add', 'button');// specific slice of elements

HTML.tag....add(tag|Node|Array) Element|Array

This automatically adds the specified tag or node (or list thereof) to the element(s) on which it was called.

HTML.body.add('div'); // returns a newly added div element

HTML.body.add('div').add('h1'); // returns the new h1 element (with div parent)

HTML.head.add(document.createElement('div'));

HTML.body.add([node1, node2, [ul1, ul2]]); // yummy recursive adding

HTML.tag....add('emmet-abbr') Element|Array

The standard HTML.js artifact comes with the "emmet" extension, which lets you use emmet abbreviations to add elements to the DOM. This extension supports most emmet features, except grouping and numbering. Those may be added later.

HTML.body.add('ul>li{list item text}*10');

//Use in conjuction with only
HTML.body.add('ul>li{item}*10')
	.only(function(li,i){ return i%2; })
	.each('classList.add','odd');

HTML.tag....remove() undefined|Array

Removes the specified node (or list thereof). Some browsers provide this natively for elements, for the few who don't this polyfills the gap and enables use of it on arrays of elements. When called on a list, it returns the list of deleted items.

HTML.query('.foo').remove();

HTML.ify(Element|Array) Element|Array

When you get element(s) from an interface not under HTML's supervision, call this on it to give it HTML properties and functions.

if (!('each' in node)) {
	HTML.ify(node);
}
node.each(function(el){ console.log(el, ' is your friend!'); });

HTML._other Node|Array

On any element, you may access the non-element nodes via ._other

var nodes = HTML.body.section._other;
var text = nodes.only(function(node){ return node.nodeType == 3; });

HTML._.fn.name = function;

Use this to create your own plugins that extend the DOM, but remember to tread lightly! HTML is about learning and using the DOM, not obscuring it beneath foreign interfaces.

HTML._.fn.hide = function() {
	return this.each('style.display', 'none');	
};
HTML.query('.foo').hide();

HTML._.resolve[alias] = property; 0.10.0

Occasionally, the verbosity of the DOM can, like any friend, become tiresome. You may create property aliases for each.

HTML._.resolve['-class'] = 'classList.remove';
HTML._.resolve['+class'] = 'classList.add';
HTML.query('.foo').each('-class', 'foo').each('+class', 'bar');

HTML._.resolve.insert = 'insertAdjacentHTML';
HTML.query('.neighbor').each('insert', 'afterend', '<span>Hello.</span>');

<html data-html-reference="reference"> 0.10.1

Rumor has it some people find 'HTML' annoying to type. If you prefer another name, you can configure it globally by setting a data-html-reference attribute on the root element. This, of course, doesn't apply to those loading via a tool like AMD or Browserify where HTML is not automatically set as a reference in the window.

<html data-html-reference="html"><
<script>
  html.query('example-element').each('example-attribute','example value');
</script>