Fantasy JavaScript DOM Specification

Welcome to a magical dream world where DOM specifications are as limited as your imagination. Open your mind and console to play with all the whimsical goodies documented below.


Document

Manipulation

Document.createFragment

Creates a document from the defined HTML.

document.createFragment("<div class=foo>bar</div>");

Traversal

Document.descendants

Returns a node list of all nodes which are descendants of the current document.

document.descendants;

Document.descendantsBySelector

Returns a node list of descendant nodes of the current document which match the CSS selector.

document.descendantsBySelector(selector);

Document.child

Returns a node list of all nodes which are children of the current document.

document.child;

Node

Manipulation

Node.append.before

Appends a node or nodes before the current node, returning the current node.

currentNode.append.before(node1, ..., nodeN);

Node.append.after

Appends a node or nodes after the current node, returning the current node.

currentNode.append.after(node1, ..., nodeN);

Node.append.firstChild

Appends a node or nodes as the first child of the current node, returning the current node.

currentNode.append.firstChild(node1, ..., nodeN);

Node.append.lastChild

Appends a node or nodes as the last child of the current node, returning the current node.

currentNode.append.lastChild(node1, ..., nodeN);

Node.appendTo.before

Appends the current node before a node, returning the current node.

currentNode.appendTo.before(node);

Node.appendTo.after

Appends the current node after a node, returning the current node.

currentNode.appendTo.after(node);

Node.appendTo.firstChild

Appends the current node as the first child of a node, returning the current node.

currentNode.appendTo.firstChild(node);

Node.appendTo.lastChild

Appends the current node as the last child of a node, returning the current node.

currentNode.appendTo.lastChild(node);

Node.remove

Removes the current node from its parent, returning the current node.

currentNode.remove();

Node.replace

Replaces a node with the current node, returning the current node.

currentNode.replace(node);

Node.replaceWith

Replaces the current node with a node or nodes, returning the current node.

currentNode.replaceWith(node1, ..., nodeN);

Traversal

Node.ascendants

Returns a node list of all nodes which are ascendants of the current node.

currentNode.ascendants;

Node.descendants

Returns a node list of all nodes which are descendants of the current node.

currentNode.descendants;

Node.parent

Returns the parent of the current node.

currentNode.parent;

Node.child

Returns a node list of all nodes which are children of the current node.

currentNode.child;

Node.before

Returns the sibling before the current node.

currentNode.before;

Node.after

Returns the sibling after the current node.

currentNode.after;

Node.first

Returns the first sibling of the current node.

currentNode.first;

Node.last

Returns the last sibling of the current node.

currentNode.last;

Node.firstChild

Returns the first child node of the current node.

currentNode.firstChild;

Node.lastChild

Returns the last child node of the current node.

currentNode.lastChild;

Node.ascendantsBySelector

Returns a node list of ascendant nodes of the current node which match the CSS selector.

currentNode.ascendantsBySelector(selector);

Node.descendantsBySelector

Returns a node list of descendant nodes of the current node which match the CSS selector.

currentNode.descendantsBySelector(selector);

Node.withAscendants

Returns a node list of the current node and all nodes which are ascendants of the current node.

currentNode.withAscendants;

Node.withDescendants

Returns a node list of the current node and all nodes which are descendants of the current node.

currentNode.withDescendants;

Node.withAscendantsBySelector

Returns a node list of the current node and ascendant nodes of the current node which match the CSS selector.

currentNode.withAscendantsBySelector(selector);

Node.withDescendantsBySelector

Returns a node list of the current node and descendant nodes of the current node which match the CSS selector.

currentNode.withDescendantsBySelector(selector);

Events

Node.eventList

Returns the event list for the current node.

currentNode.eventList;

Node.eventList.add(options)

Adds an event to the current node using the options parameter.

The properties type, listener, and useCapture apply to the listener. The selector property applies to the event target. All other properties apply to the event object, and those prefixed with min or max only apply to properties with numerical values.

document.eventList.add({
	type: "mousedown",
	listener: function (e) {
		console.log("do something", e);
	},
	useCapture: false,
	selector: "p",
	shiftKey: true,
	minPageY: 100
});

Node.eventList.remove(options)

Removes any events from the current node matching the options parameter.

document.eventList.remove({
	type: "mousedown",
	listener: function (e) {
		console.log("do something", e);
	},
	useCapture: false,
	selector: "p",
	shiftKey: true,
	minPageY: 100
});

Node.eventList.dispatch(options)

Dispatches an event on the current node using the options parameter.

document.eventList.dispatch({
	type: "mousedown",
	selector: "p",
	shiftKey: true,
	clientY: 101
});

Node.eventList.init(options)

Initializes eventList handlers for new events using the options parameter.

var listener = function (e) {
	console.log(e);
};

window.eventList.init({
	type: "mousemove:console",
	add: function () {
		eventList.add({
			type: "mousemove",
			listener: listener
		});
	},
	remove: function () {
		eventList.remove({
			type: "mousemove",
			listener: listener
		});
	}
});

window.eventList.add({ type: "mousemove:console" });

Data

Node.content

Returns or defines the content of the current node.

currentNode.content;
currentNode.content = "foo";

NodeList

Manipulation

NodeList.appendTo.before

Appends the nodes in the current node list before a node, returning the current node list.

currentNodeList.appendTo.before(nodeB);

NodeList.appendTo.after

Appends the nodes in the current node list after a node, returning the current node list.

currentNodeList.appendTo.after(nodeB);

NodeList.appendTo.firstChild

Appends the nodes in the current node list as the first child of a node, returning the current node list.

currentNodeList.appendTo.firstChild(nodeB);

NodeList.appendTo.lastChild

Appends the nodes in the current node list as the last child of a node, returning the current node list.

currentNodeList.appendTo.lastChild(nodeB);

NodeList.remove

Removes the nodes in the current node list from their parents, returning the current node list.

currentNodeList.remove();

Traversal

NodeList.first

Returns the last node in the current node list.

currentNodeList.first;

NodeList.last

Returns the last node in the current node list.

currentNodeList.last;

NodeList.filterBySelector(selector)

Returns a node list of all nodes of the current node list which match the selector.

currentNodeList.filterBySelector(selector);

This Fantasy JavaScript DOM Specification has been successfully tested in Chrome 20, Firefox 13, Opera 12, and Safari 5.1.7.