dom.js

Por Nando Vieira

27 de Agosto de 2006

Leia em 2 minutos

This is a library that makes your life easier when using DOM(Document Object Model).

VIEW SOURCE: dom.js (9.7kb)
MINIFIED VERSION: dom_min.js (4kb)

API

dom.support()

Checks if browser supports document.getElementById, document.getElementsById and document.createElement.

dom.byId(id[, id1..idn])

Emulates document.getElementById method. If you provide more than one param, returns an array of elements.

dom.byTag(tagname[, target])

Emulates document.getElementsByTagName method. If you don't provide a target element, uses document as target.

dom.byClass(classname[, target, tag])

Gets elements that has the specified CSS class. If you don't provide a target element, uses document as target. You can filter elements by a specific tag.

dom.parseStyle(target, style)

Applies the specified style to target. Style needs to be as CSS format (i.e., background-color insted of backgroundColor).

dom.element(type[, content, attrib, nodes, mode, remove_content])

Emulates document.createElement method.

type: The element name (i.e. H1, DIV, ...)

content: Content that will be appended to the element. You can provide an element or a string.

attrib: Attributes that will be applied to the element. Object type (i.e. {'class':'box', 'id':'myid', 'style':'background-color: #ffc'})

nodes: Array, string or element that this element will be appended.

mode: The mode this element will act. Should be "replace" or "append" (default).

remove_content: Removes all content from target node before adding the element. Makes sense only with "append" mode.

dom.content(target, content[, empty])

Emulates document.appendChild method.

target: The element that content will be appended.

content: Can be string or element.

empty: Empties the element before appending content.

dom.fragment()

Emulates document.createDocumentFrament method.

dom.text(content)

Emulates document.createTextNode method.

dom.empty(target)

Remove all elements from target.

dom.replace(node, target)

Emulates element.replaceChild method.

node: the replacement node.

target: the existing node.

dom.remove(target)

Emulates the element.removeChild method.

dom.before(node, target)

Emulates the element.insertBefore method.

dom.after(node, target)

Adds node after target element.

dom.first(node, target)

Inserts node as first child of target.

dom.clone(target, recursive)

Emulates element.cloneNode method.

dom.tree(node)

Returns node structure as array. Don't use this method in complex elements.

Sample:

<div id="container">
    <h1>DOM.TREE</h1>
    <a href="http://example.com">link</a>
    <a href="http://example.com">other link</a>
</div>

<script type="text/javascript">
    var div = dom.tree(dom.byId("container"));
    alert(div.h1.length);
    alert(div.h1[0].self);
    alert(div.a[0].self);
    alert(div.a[1].self);
</script>

dom.currentStyle(target)

Returns an array with all applied styles.

dom.parseXML(xml)

Parses an string as XML. The XML string needs to be well-formed.

dom.parseHTML(html[, parent])

Parses an string as HTML, adding all tags as elements insted of using element.innerHTML method. If no parent is provided, uses document.createDocumentFragment. HTML needs to be well-formed XML.

Sample:

<script type="text/javascript">
function foo(s)
{
    alert(s);
}

var content =   '<div id="container" style="background: #ffc; border: 3px solid #03c;">' +
                '<h1 class="title">DOM.JS</h1>' +
                '<p>Just testing <strong>dom.js</strong></p>' +
                '</div>' +
                ' and some text and <a href="javascript:foo(

you clicked this link);" ' +
                'onmouseout="foo(onmouseout event);">foo</a>';
/* you can replace the following code by only one line
dom.parseHTML(content, document.body)
*/
var div = dom.parseHTML(content);
document.body.appendChild(div);
</script>