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