DomQuery

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

Example:

vardom=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

vardom=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

vardom=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.

vardom=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;

varrow=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:

vardom=require('domquery')dom('body').addClass('foobar')dom('body').hasClass('foobar')// => truedom('body').removeClass('foobar')dom('body').hasClass('foobar')// => falsedom('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

vardom=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)functionaltA(event){console.log('user pressed alt + a')}

Attributes

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