DomQuery
jQuery-like handy DOM manipulation library composed from small modules.
Example:
var dom =
Install
$ npm install domquery
Usage
Recommended to use browserify for bundling for client-side. Sorry, it does not work in Node.
Selecting
var dom = // => [array, of, elements] // [all children of .foo, .bar, .qux] parent// [parent elements of .foo, .bar, .qux] // [all siblings that matches "button.tweet"]
Details: dom-select, siblings, closest
Changing Style
var dom = style'background-color' 'red' // OR style 'padding': '10px' 'margin': '10px'
Other available Methods:
- show
- hide
Details: dom-style
Adding and Removing Elements
domquery embeds dom-tree to provide following methods;
.insert(parent element)
Insert an element to a parent element.
var dom =
.add(child)
Add a new element to specified parent element.
Or;
var row =
child
can be an element, array, selector or HTML.
.addBefore(child, reference)
Adds child
before reference
child
can be an element, array, selector or HTML.reference
can be an element, array or selector.
.addAfter(child, reference)
Adds child
after reference
child
can be an element, array, selector or HTML.reference
can be an element, array or selector.
.replace(target, replacement)
Replaces target
with replacement
or:
.remove(element)
Inline CSS
Methods: addClass, hasClass, removeClass, toggleClass
Example:
var dom = // => true // => false // => true
Other Available Methods:
- addClass
- hasClass
- removeClass
- toggleClass
Details: dom-classes
Events
domquery embeds dom-event, key-event and delegate-dom modules to provide following methods;
.on(event, callback)
Add a new event
var dom =
Shortcuts:
- change
- click
- keydown
- keyup
- keypress
- mousedown
- mouseover
- mouseup
- resize
.off(event, callback)
Remove the event listener;
.on(event, selector, callback)
Delegate event handler function for selector
:
.onKey(event, callback)
Adds a keyboard event:
.offKey(event, callback)
Removes a keyboard event:
{ console}
Attributes
var dom = // => http://foobar.com
Content
Reading:
// equivalent of `innerHTML` // equivalent of `value`
Setting:
More info about it is at dom-value