not fancy dom helper utils
$ component-install stagas/dom-litereturns Element
Create an Element of tag
by passing a tag name, or
with an html string.
Examples:
var button = dom.create('button')
var div = dom.create('<div>Hello</div>')returns Element
Get an Element by id.
returns Element
Find first Element by sel in
optional target.
If target is omitted then
document.body is used instead.
returns NodeList
Find Elements by sel in
optional target.
If target is omitted then
document.body is used instead.
returns el:Element
Append el to target parent.
If target is omitted then
document.body is used instead.
returns el:Element
Prepend el to target parent.
If target is omitted then
document.body is used instead.
returns el:Element
Insert el before target.
returns el:Element
Remove el from its parentNode.
returns el:Element
Replace target Element with el.
returns el:Element
Apply css styles to el
or change just one prop to val
or retrieve style value of prop.
Examples:
dom.css(el, { padding: 10, margin: 10 })
dom.css(el, 'text-shadow', '1px 1px solid #ccc')
dom.css(el, 'display') === 'block' // truereturns style:Object
Gets computed style for el.
returns rect:Object
Gets the bounding rectangle for el.
returns classList:Set
Returns a cross-browser classList
for el.
Example:
var classes = dom.classes(el)
classes.add('some-class')
classes.remove('another')returns html|el:String|Element
Get the html string of Element el
or set its inner html.
When passed an html it returns
the Element instead of the html
contents.
Examples:
var el = dom.create('div')
dom.html(el, '<span>Hello</span>')
dom.html(el) === '<div><span>Hello</span></div>' // truereturns el:Element
Hide el (sets display: none).
returns Element
Show el (sets display: block).
returns el:Element
Bind to event for el and invoke fn(e).
When a selector is given then events are delegated.
returns el:Element
Unbind to event for el and invoke fn(e).
When a selector is given then delegated event
handlers are unbound.
returns el:Element
Same as .on but will call .off
immediately after the first event.
returns el:Element
Trigger a DOM event.
Examples:
var button = dom.create('button')
dom.trigger(button, 'click')
dom.trigger(document.body, 'mousemove', { clientX: 10, clientY: 35 });Where sensible, sane defaults will be filled in. See the list of event types for supported events.
Loosely based on: https://github.com/kangax/protolicious/blob/master/event.simulate.js
returns found:Element
Find closest element from el
that matches selector sel.
returns el:Element
Returns a raw Element from any type of el,
jQuery, custom container, raw Element.
MIT