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.
Creates a document from the defined HTML.
document.createFragment("<div class=foo>bar</div>");
Returns a node list of all nodes which are descendants of the current document.
document.descendants;
Returns a node list of descendant nodes of the current document which match the CSS selector.
document.descendantsBySelector(selector);
Returns a node list of all nodes which are children of the current document.
document.child;
Appends a node or nodes before the current node, returning the current node.
currentNode.append.before(node1, ..., nodeN);
Appends a node or nodes after the current node, returning the current node.
currentNode.append.after(node1, ..., nodeN);
Appends a node or nodes as the first child of the current node, returning the current node.
currentNode.append.firstChild(node1, ..., nodeN);
Appends a node or nodes as the last child of the current node, returning the current node.
currentNode.append.lastChild(node1, ..., nodeN);
Appends the current node before a node, returning the current node.
currentNode.appendTo.before(node);
Appends the current node after a node, returning the current node.
currentNode.appendTo.after(node);
Appends the current node as the first child of a node, returning the current node.
currentNode.appendTo.firstChild(node);
Appends the current node as the last child of a node, returning the current node.
currentNode.appendTo.lastChild(node);
Removes the current node from its parent, returning the current node.
currentNode.remove();
Replaces a node with the current node, returning the current node.
currentNode.replace(node);
Replaces the current node with a node or nodes, returning the current node.
currentNode.replaceWith(node1, ..., nodeN);
Returns a node list of all nodes which are ascendants of the current node.
currentNode.ascendants;
Returns a node list of all nodes which are descendants of the current node.
currentNode.descendants;
Returns the parent of the current node.
currentNode.parent;
Returns a node list of all nodes which are children of the current node.
currentNode.child;
Returns the sibling before the current node.
currentNode.before;
Returns the sibling after the current node.
currentNode.after;
Returns the first sibling of the current node.
currentNode.first;
Returns the last sibling of the current node.
currentNode.last;
Returns the first child node of the current node.
currentNode.firstChild;
Returns the last child node of the current node.
currentNode.lastChild;
Returns a node list of ascendant nodes of the current node which match the CSS selector.
currentNode.ascendantsBySelector(selector);
Returns a node list of descendant nodes of the current node which match the CSS selector.
currentNode.descendantsBySelector(selector);
Returns a node list of the current node and all nodes which are ascendants of the current node.
currentNode.withAscendants;
Returns a node list of the current node and all nodes which are descendants of the current node.
currentNode.withDescendants;
Returns a node list of the current node and ascendant nodes of the current node which match the CSS selector.
currentNode.withAscendantsBySelector(selector);
Returns a node list of the current node and descendant nodes of the current node which match the CSS selector.
currentNode.withDescendantsBySelector(selector);
Returns the event list for the current node.
currentNode.eventList;
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 });
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 });
Dispatches an event on the current node using the options parameter.
document.eventList.dispatch({ type: "mousedown", selector: "p", shiftKey: true, clientY: 101 });
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" });
Returns or defines the content of the current node.
currentNode.content;
currentNode.content = "foo";
Appends the nodes in the current node list before a node, returning the current node list.
currentNodeList.appendTo.before(nodeB);
Appends the nodes in the current node list after a node, returning the current node list.
currentNodeList.appendTo.after(nodeB);
Appends the nodes in the current node list as the first child of a node, returning the current node list.
currentNodeList.appendTo.firstChild(nodeB);
Appends the nodes in the current node list as the last child of a node, returning the current node list.
currentNodeList.appendTo.lastChild(nodeB);
Removes the nodes in the current node list from their parents, returning the current node list.
currentNodeList.remove();
Returns the last node in the current node list.
currentNodeList.first;
Returns the last node in the current node list.
currentNodeList.last;
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.