domquery

jQuery-like Handy DOM Manipulation Library

jQuery-like handy DOM manipulation library composed from all small modules in NPM.

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()
$ npm install domquery
var dom = require('domquery')
dom('body .foo .bar')
// => [array, of, elements] 

Details: dom-select

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

domquery embeds dom-tree to provide following methods;

Insert an element to a parent element.

var dom = require('domquery')
 
dom('<h1>{title}</h1><div>{content}', { title: 'Hello!', content: 'world' })
  .insert('body')

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.

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.

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.

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')
dom('ul .songs').remove('li:first-child')

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

domquery embeds dom-event, key-event and delegate-dom modules to provide following methods;

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

Remove the event listener;

dom('body').off('click', fn)

Delegate event handler function for selector:

dom('body ul').on('click', 'li', function (event) {
  console.log('clicked a list item!')
})

Adds a keyboard event:

dom('input').onKey('alt a', function (event) {
  console.log('user pressed alt + a')
})

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')
}
var dom = require('domquery')
 
dom('a.my-link').attr('href')
// => http://foobar.com 
 
dom('a').attr('href', 'http://foobar.com')

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