Über DOM
Introduction
A set of simple DOM extensions make life easier in the post-jQuery era. Fast, small and supports IE11+.
API reference
Manipulation
-
u.find(selector)
andel.find(selector)
Similar to
querySelectorAll()
. Returns a plain list of extended elements so all lambdas work (i.e.forEach
,map
,filter
, etc). -
u.find1(selector)
andel.find(selector)
Similar to
Element.querySelector()
. Returns an extended element or<empty>
element if nothing found to avoid unnecessary null checks. -
el.dad()
Returns extended parent element or
<empty>
if no parent found. -
el.dad(selector)
Similar to
Element.closest(selector)
. Returns extended element. -
el.kids()
Returns plain list of child extended elements.
-
el.index()
Returns index of the current element.
-
el.del()
Removes element.
-
el.inDom()
Returns
true
if element is in DOM. -
el.addTo(el)
TODO
-
el.addAfter(el)
TODO
-
el.addBefore(el)
TODO
-
el.data(name)
Returns the value of the data attibute. The name uses camelCase notation, which translates to a hyphen-separated attribute name (i.e.
el.data('fooBar') will return the value of
data-foo-bar` attribute). Numeric and boolean strings are converted to the appropriate JavaScript primitives. -
el.data(name, value)
Sets the data attribute. Note that attributes are strings only; for objects
JSON.stringify()
should be used. -
u.create(htmlString)
Creates extended element or list of extended elements from string.
Events
-
el.on(eventName [, selector], listener)
Binds event listener - sort of like
Element.addEventListener(eventName, listener, true)
. An optional selector will filter the descendants of the selected element that trigger the event. If the selector omitted, the event is always triggered when it reaches the selected element. -
el.off (eventName, listener)
Removes event listener.
-
el.trigger (eventName, args)
Triggers an event on element passing arguments.
-
u.event (eventName)
Creates new event.
Cookies
-
u.cookies.get (name)
-
u.cookies.set (name, value, time)
-
u.cookies.del (name)
-
u.cookies.has (name)
Ajax
-
u.ajax (url, callback)
-
u.ajax (args, callback)
Examples
Resolving attribute
WIP
Creating an element
WIP
Creating multiple elements
WIP
Event handling on dynamically added elements
WIP
AJAX GET call
u.ajax('http://foo', (err, req) => {
if (!err) {
console.log(req.json())
}
})
AJAX POST call
WIP