domquery v3.0.0
DomQuery
jQuery-like handy DOM manipulation library composed from small modules.
Example:
var dom = require('domquery')
dom('ul.songs:last-child')
.add('<li><a href="/play/{id}">Play: {title}</a></li>', { id: 123, title: "foo" })
.show()
Install
$ npm install domquery
Usage
Recommended to use browserify for bundling for client-side. Sorry, it does not work in Node.
Selecting
var dom = require('domquery')
dom('body .foo .bar')
// => [array, of, elements]
dom('.foo', '.bar', '.qux').select('*')
// [all children of .foo, .bar, .qux]
dom('.foo', '.bar', '.qux').parent()
// [parent elements of .foo, .bar, .qux]
dom('.foo', '.bar', '.qux').siblings('button.tweet')
// [all siblings that matches "button.tweet"]
Details: dom-select, siblings, closest
Changing Style
var dom = require('domquery')
dom('body .foo .bar')
.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 = require('domquery')
dom('<h1>{title}</h1><div>{content}', { title: 'Hello!', content: 'world' })
.insert('body')
.add(child)
Add a new element to specified parent element.
dom('body > ul')
.add('<li>Hello</li>')
Or;
var row = dom('<li>{0}: {1}</li>', 123, 'Hello World')
dom('body > ul').add(row)
child
can be an element, array, selector or HTML.
.addBefore(child, reference)
Adds child
before reference
dom('ul.songs')
.addBefore('<li>third song</li>', 'ul.songs li:nth-child(3)')
child
can be an element, array, selector or HTML.reference
can be an element, array or selector.
.addAfter(child, reference)
Adds child
after reference
dom('ul.songs')
.addAfter('<li>third song</li>', 'ul.songs li:nth-child(2)')
child
can be an element, array, selector or HTML.reference
can be an element, array or selector.
.replace(target, replacement)
Replaces target
with replacement
dom('ul.songs')
.replace('li:first-child', document.createElement('textarea'))
or:
dom('ul.songs')
.replace('li:first-child', '<li>{0}: {name}</li>', 123, 'new song')
.remove(element)
dom('ul .songs').remove('li:first-child')
Inline CSS
Methods: addClass, hasClass, removeClass, toggleClass
Example:
var dom = require('domquery')
dom('body').addClass('foobar')
dom('body').hasClass('foobar')
// => true
dom('body').removeClass('foobar')
dom('body').hasClass('foobar')
// => false
dom('body').toggleClass('foobar')
dom('body').hasClass('foobar')
// => 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 = require('domquery')
dom('body').on('click', function (event) {
console.log('clicked body')
})
Shortcuts:
dom('ul li').click(function (event) {
console.log('clicked a "li"')
})
- change
- click
- keydown
- keyup
- keypress
- mousedown
- mouseover
- mouseup
- resize
.off(event, callback)
Remove the event listener;
dom('body').off('click', fn)
.on(event, selector, callback)
Delegate event handler function for selector
:
dom('body ul').on('click', 'li', function (event) {
console.log('clicked a list item!')
})
.onKey(event, callback)
Adds a keyboard event:
dom('input').onKey('alt a', function (event) {
console.log('user pressed alt + a')
})
.offKey(event, callback)
Removes a keyboard event:
dom('input').onKey('alt a', altA)
dom('input').offKey('alt a', altA)
function altA (event) {
console.log('user pressed alt + a')
}
Attributes
var dom = require('domquery')
dom('a.my-link').attr('href')
// => http://foobar.com
dom('a').attr('href', 'http://foobar.com')
Content
Reading:
dom('.foo').html() // equivalent of `innerHTML`
dom('input.my-input').val() // equivalent of `value`
Setting:
dom('.foo').html('<div>new content</div>')
dom('input.my-input').val('new value')
More info about it is at dom-value
8 years ago
8 years ago
8 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago