dom.js
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
anddocument.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 atarget
element, usesdocument
as target. dom.byClass(classname[, target, tag])
- Gets elements that has the specified CSS class. If you don't provide a
target
element, usesdocument
as target. You can filter elements by a specifictag
. dom.parseStyle(target, style)
- Applies the specified
style
totarget
. Style needs to be as CSS format (i.e.,background-color
insted ofbackgroundColor
). 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 thatcontent
will be appended.content
: Can be string or element.empty
: Empties the element before appendingcontent
.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
aftertarget
element. dom.first(node, target)
- Inserts
node
as first child oftarget
. 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 noparent
is provided, usesdocument.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>