A small convenience library. Treat a document like a database waiting to be queried. Feedback and suggestions appreciated.
Status: alpha - fresh and subject to change
A quick library to ease access to the Document Object Model (DOM). Treat the markup language like a content database and query it lightning fast.
dom.attributes(node); //returns an object of attributes in this pattern name:value
dom.formvalue(formNode); //returns an object of value in this pattern nameValue:value
var li = dom.tags("li");
dom.removeattribute({
name: "class",
node: li
}); //returns nothing
dom.tags({
name: "li",
node: dom.id("tabs")
})[0]; //returns first "li" descendant of dom.id("tabs")
dom.ancestor({
name: "div",
node: this
}); //returns first element containing this with name "div"
var list = dom.uncles(this);
list[list.length]; //returns last list item from a parent node's siblings
var tabs = dom.tags({
name: "li",
node: dom.id("tabs")
});
dom.event({
callback: function () {
var a = 0,
divs = dom.childname({
name: "div",
node: dom.tags("body")[0]
}),
length = divs.length;
dom.removeattribute({
name: "class",
node: tabs
});
dom.setattribute({
name : "class",
node : this,
value: "active"
});
for (a = 0; a < length; a += 1) {
divs[a].style.display = "none";
}
(dom.id(dom.getattribute({
node: this,
name: "id"
}).substr(4))).style.display = "block";
}
}); //returns undefined
Description Find the first ancestor node of a provided tag name from a specified starting node.
Returns a DOM element node
Requires an object
Example
dom.ancestor({
caps:
true,
name:
"tagName",
node:
domNode
});
| property | necessity | type | description |
|---|---|---|---|
| caps | optional | boolean | Determines if search should be case sensitive and defaults to false. |
| name | required | string | Determines the node name to search for. |
| node | required | domNode | The location where the search must start. |
Description Gather attributes from a DOM element node.
Returns an array or object
Requires a DOM element node or object
Example
dom.attributes({
array:
true,
node :
domElementNode
});
Example
dom.attributes(domElementNode);
| property | necessity | type | description |
|---|---|---|---|
| array | optional | boolean | Determines if attribute should be an array. Defaults to false, which returns an object. |
| node | required | domElementNode | The DOM node to search for attributes. |
Description Search for DOM element nodes containing the specified attribute.
Returns an array of DOM element nodes
Requires an object
Example
dom.attributesearch({
caps :
true,
name :
"attributeName",
node :
domElementNode,
value:
"attributeValue"
});
| property | necessity | type | description |
|---|---|---|---|
| caps | optional | boolean | Determines if search should be case sensitive and defaults to false. |
| name | required | string | Determines the attribute name to search for. |
| node | optional | domElementNode | The location where the search must start. If absent the search will start at document.documentElement. |
| value | optional | string | Allows searching attributes assigned a specified value. |
Description Provides an array of DOM element nodes immediately under a specified node.
Returns an array DOM element nodes
Requires a DOM element node
Example
dom.childelements(domElementNode);
Description Gathers child node elements from a specified node of a specified node name.
Returns an array of DOM element nodes
Requires an object
Example
dom.childname({
caps:
boolean,
name:
"string",
node:
domElementNode
});
| property | necessity | type | description |
|---|---|---|---|
| caps | optional | boolean | Must be provided a value of true for case sensitive matches. Default is false. |
| name | required | string | The node name value to search for. |
| node | required | domElementNode | The DOM element node to search for child nodes. |
Description A shallow replica of the childNodes property, but returns an array instead of a node list.
Returns an array on DOM nodes
Requires a DOM element node
Example
dom.children(domElementNode);
Description Produces an array of DOM elements that immediately contain a text node child which contains the provided text sample.
Returns an array of DOM element nodes
Requires either a string or an object
Example
dom.containstext({
node:
domElementNode,
text:
"sample text string"
});
Example
dom.containstext("sample text
string");
| property | necessity | type | description |
|---|---|---|---|
| node | optional | domElementNode | The location where the search must start. If absent the search will start at document.documentElement. |
| text | required | string | The text content to search for. |
Description Finds all nodes that are immediate children of the parent node's siblings.
Returns an array of DOM nodes
Requires a DOM node
Example
dom.cousins(domNode);
Description Gathers all element nodes, not just immediate children, under the specified node.
Returns an array of DOM element nodes
Requires a DOM element node
Example
dom.descendantelements(domElementNode);
Description Gathers all nodes, not just immediate children, under the specified node.
Returns an array of DOM nodes
Requires a DOM element node
Example
dom.descendants(domElementNode);
Description Assigns an event handler to an event property on a specified node or a list of nodes.
Returns nothing (undefined)
Requires an object in the following form
Example
dom.event({
callback:
function
name :
"eventName"
node :
domElementNode,
});
Example
dom.event({
callback:
function
name :
"eventName"
node :
array/node list,
});
| property | necessity | type | description |
|---|---|---|---|
| callback | required | function | A function reference or actual function to assign for the event. |
| name | required | string | The name of the event property. An event property name typically begins with "on", such as "onclick". |
| node | required | domElementNode or array | The item(s) on which to bind the event. |
Description Creates an array of names and values or object where the name attribute of form controls are the key names and the values are the object's property values.
Returns an array of names/values or object where name attribute values are property names and form value properties are the object's values
Requires a form node or object
Example
dom.formvalue({
array:
true,
node :
domFormNode
});
Example
dom.formvalue(domFormNode);
| property | necessity | type | description |
|---|---|---|---|
| array | optional | boolean | Determines if attribute should be an array. Defaults to false, which returns an object. |
| node | required | domFormNode | The DOM form node to search for values. |
Description Returns the value of a specified attribute. A shallow replica of the getAttribute method.
Returns a string
Requires an object in the following form
Example
dom.getattribute({
name:
"attributeName",
node:
domElementNode
});
| property | necessity | type | description |
|---|---|---|---|
| name | required | string | The name of the attribute. |
| node | required | domElementNode | The dom node to search. |
Description Get an element by an id attribute value. Shallow replica of the getElementById method.
Returns a DOM element node or null
Requires a string
Example
dom.id("idValue");
Description Get elements with name attribute value matching the supplied string. Shallow replica of the getElementsByName method.
Returns an array of elements with the provided name attribute value
Requires a string
Example
dom.name("nameValue");
Description Returns the next element sibling of a given node or null.
Returns a DOM element node or null
Requires a DOM node
Example
dom.nextelement(domNode);
Description Returns the next adjacent node of a given node or null.
Returns a DOM node or null
Requires a DOM node
Example
dom.nextsibling(domNode);
Description Returns the parent node of a given node. Shallow replica of the parentNode property
Returns a DOM node or null
Requires a DOM node
Example
dom.parent(domNode);
Description Returns the previous element sibling of a given node or null.
Returns a DOM element node or null
Requires a DOM node
Example
dom.previouselement(domNode);
Description Returns the previous adjacent node of a given node or null.
Returns a DOM node or null
Requires a DOM node
Example
dom.previoussibling(domNode);
Description Removes a specified attribute from one or more DOM element nodes.
Returns nothing (undefined)
Requires either a domElementNode or array/node list
Example
dom.removeattribute({
name:
string,
node:
domElementNode
});
Example
dom.removeattribute({
name:
string,
node:
array
});
| property | necessity | type | description |
|---|---|---|---|
| name | required | string | The attribute name to remove. |
| node | required | domElementNode or array | The node(s) to remove the attribute upon. |
Description Sets a value for a specified attribute to a targeted node. Shallow replica of the setAttribute method.
Returns nothing (undefined)
Requires an object in the following form
Example
dom.setattribute({
name :
"attributeName",
node :
domElementNode,
value:
"attributeValue"
});
Example
dom.setattribute({
name :
"attributeName",
node :
array/node list,
value:
"attributeValue"
});
| property | necessity | type | description |
|---|---|---|---|
| name | required | string | The name of the attribute. |
| node | required | domElementNode or array | The dom node(s) to set the attribute value upon. |
| value | required | string | The value to assign to the given attribute. |
Description Returns an array of elements with the matching tag name.
Returns an array of DOM element nodes
Requires either a string or an object in the following form
Example
dom.tags({
name:
"nodeName",
node:
domElementNode
});
Example
dom.tags("nodeName");
| property | necessity | type | description |
|---|---|---|---|
| name | required | string | The node name to search for. |
| node | optional | domElementNode | Where to start the search. Defaults to document.documentElement. |
Description Searches for DOM nodes matching a specified nodeType property value.
Returns an array of DOM nodes matching the provided node type value
Requires either a string matching a nodeType name value or an integer 0 - 12 or an object in the following form
Example
dom.type({
node:
domElementNode,
type:
string
});
Example
dom.type("COMMENT_NODE");
Example
dom.type(3);
Example
dom.type("3");
| property | necessity | type | description |
|---|---|---|---|
| node | optional | domElementNode | The node where to start the search. Defaults to document.documentElement. |
| type | required | number or "string" | The nodeType value to search for. The value can be an integer 0 - 12 of either number or string type or a standard node type name, such as: ELEMENT_NODE or COMMENT_NODE. |
Description Returns an array of a siblings to a given node's parent node.
Returns an array of DOM element nodes
Requires a domElementNode
Example
dom.uncles(domNode);
Copyright (C) 2014 Austin Cheney
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.