jQuery-like handy DOM manipulation library composed from small modules in NPM.
JavaScript
Switch branches/tags
Nothing to show
Permalink
Failed to load latest commit information.
lib Passing tests Apr 9, 2016
.gitignore hello internets Jun 16, 2013
.npmignore 0.0.3 Jun 17, 2013
README.md
index.js more docs, and new tests May 12, 2014
package.json ...republishing as 3.0.0, I guess Apr 9, 2016
test.js Passing tests Apr 9, 2016

README.md

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