Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

DOM traversal, manipulation and events aggregate library (like jQuery)

NotificationsYou must be signed in to change notification settings

component/dom

Repository files navigation

jQuery inspired DOM traversal / manipulation component. Aggregates thefollowing components to create a more familiar experience when you needthe combined functionality of:

  • domify to convert HTML to DOM nodes
  • query for selector engine integration
  • classes to add, remove, and toggle classes
  • delegate for event delegation
  • event for event binding
  • value for form field values
  • css for style properties

Installation

Withcomponent:

$ component install component/dom

Stand-alone

This library may be used stand-alone without the componenttool, simply add ./dom.js to your application and referencethedom global. With all its dependencies dom is the following size:

   28K  dom.js   16K  dom.min.js  8.0K  dom.js.gz  4.0K  dom.min.js.gz

Example

vardom=require('dom');dom('li').select(function(el){returnel.text()=='Maru';}).addClass('amazing');

API

All occurrances ofList refer to:

  • an element passed
  • a string of html
  • a selector string
  • a node list
  • an array of nodes
  • a domList itself

dom(list)

Return aList with the given element(s)via selector, html, arrays, nodelists, etc.

dom('ul li');dom(dom('a'));dom('<p>Hello</p>');

.append(list)

Append and returnlist:

dom('ul').append('<li>Tobi</li>').addClass('user');

.prepend(list)

Prepend and returnlist:

dom('ul').prepend('<li>Tobi</li>').addClass('user');

.insertAfter(list)

Insert after:

dom('<div></div>').insertAfter('body');

.replace(list)

Replace:

dom('.placeholder').replace('<div>Tobi</div>').addClass('tobi');

.on(event, fn, [capture])

Bindevent handler function:

dom('a.remove').on('click',function(e){});

.on(event, selector, fn, [capture])

Bind delegateevent handler function forselector:

dom('ul li').on('click','a.remove',function(e){});

.off(event, fn, [capture])

Unbindevent callbackfn.

dom('a.remove').off('click',onremove);

.off(event, selector, fn, [capture])

Unbind delegateevent callbackfn withselector.

dom('ul li').off('click','a.remove',onremove);

.appendTo(list)

Append elements in the list tolistand return itself for chaining.

dom('<li>Tobi</li>').appendTo('ul').addClass('user');

.attr(name)

Return value for attributename:

varurl=dom('img').attr('src');

.attr(name, val)

Set attributename toval.

dom('img').attr('src','image/of/maru.jpg');

.ATTR()

Attribute getters. These are functionally equivalentto.attr(ATTR):

el.id()el.src()el.rel()el.cols()el.rows()el.name()el.href()el.title()el.style()el.tabindex()el.placeholder()

.ATTR(val)

Attribute setters. These are functionally equivalentto.attr(ATTR, val):

el.id('item-1')el.src('some/image.png')el.rel('stylesheet')el.cols(2)el.rows(3)el.name('username')el.href('http://google.com')el.title('Maru the cat')el.style('color: white')el.tabindex(2)el.placeholder('Username')

.css(prop)

Get css property value:

dom(el).css('width');

.css(prop, val)

Set css property value:

dom(el).css('width','300px');

.css(object)

Set css property values:

dom(el).css({top:5,left:10});

.addClass(name)

Add a classname to all elements in the list.

dom('img').addClass('loading');

.removeClass(name)

Remove classname to all elements in the list.

dom('img.loading').removeClass('loading');

.toggleClass(name, [bool])

Toggle classname, with optionalbool.

dom('img').toggleClass('loading');dom('img').toggleClass('loading',image.pending);

.hasClass(name)

Check if any element in the list has the given classname.

dom('img').hasClass('loading');

.find(selector)

Return a list of descendants matchingselector.

dom('.uploads').find('.complete').remove();

.each(fn)

Iterate elements passing each one as a list, and its index:

dom('ul li').each(function(li,i){if(li.hasClass('complete')){li.remove();}});

.empty()

Empties the elements.

varlist=dom('<div><a href="/meow.html">cute kitty</a></div>');assert(''==list.empty().html());

.forEach(fn)

Iterate elements passing each one, and its index:

dom('ul li').forEach(function(li,i){if(li.className=='complete'){li.parentNode.removeChild(li);}});

.map(fn)

Return an array with mapfn, passing each element as a list:

varhrefs=dom('a').map(function(a){returna.attr('href');});

Or with a string:

vartypes=dom('input').map('type');

.select(fn)

Filter elements with the given function, passing each elementas a list. This method is aliased as.filter(fn).

varpending=dom('ul li').select(function(li){returnli.hasClass('pending');});

Or with a string:

varimgs=dom('img').select('src');

.reject(fn)

Reject elements with the given function, passing each elementas a list.

varactive=dom('ul li').reject(function(li){returnli.hasClass('pending');});

Or with a string:

varactive=dom('input').reject('disabled');

.at(i)

Return aList containing theith element.

dom('ul li').at(1).remove();

.first()

Return aList containing the first element:

dom('ul li').first().remove();

.last()

Return aList containing the last element:

dom('ul li').last().remove();

.html()

Return the inner html.

.html(str)

Set the inner html tostr.

.text()

Return the text content.

.text(str)

Set text content tostr.

.clone()

Return a cloned list of cloned nodes.

.focus()

Set focus on the element.

.use([name], fn|obj)

Similar to jQuery, you can extend dom to support plugins:

varget=function(i){returnthis[i];}dom.use('get',get);

Using the function's name:

functionget(i){returnthis[i];}dom.use(get);

Passing an object through:

varobj={};obj.get=function(i){returnthis[i];}obj.draggable=function(){ ...}dom.use(obj);

Notes

It is recommended that you donot depend on this library directlywhen creating public components, unless you require most or all ofthe functionality provided. Otherwise it is preferred that you usethe smaller more specific components.

This lib will not includeany XHR support, js animations, promises, or anythingelse out of scope. This library is for DOM manipulation, traversal, and events only.

This library isnot aiming for feature parity with jQuery.

Test

npm install component-testmake test

License

MIT

About

DOM traversal, manipulation and events aggregate library (like jQuery)

Resources

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp