- Notifications
You must be signed in to change notification settings - Fork49
component/dom
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
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
Withcomponent:
$ component install component/domThis 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.gzvardom=require('dom');dom('li').select(function(el){returnel.text()=='Maru';}).addClass('amazing');
All occurrances ofList refer to:
- an element passed
- a string of html
- a selector string
- a node list
- an array of nodes
- a dom
Listitself
Return aList with the given element(s)via selector, html, arrays, nodelists, etc.
dom('ul li');dom(dom('a'));dom('<p>Hello</p>');
Append and returnlist:
dom('ul').append('<li>Tobi</li>').addClass('user');
Prepend and returnlist:
dom('ul').prepend('<li>Tobi</li>').addClass('user');
Insert after:
dom('<div></div>').insertAfter('body');
Replace:
dom('.placeholder').replace('<div>Tobi</div>').addClass('tobi');
Bindevent handler function:
dom('a.remove').on('click',function(e){});
Bind delegateevent handler function forselector:
dom('ul li').on('click','a.remove',function(e){});
Unbindevent callbackfn.
dom('a.remove').off('click',onremove);
Unbind delegateevent callbackfn withselector.
dom('ul li').off('click','a.remove',onremove);
Append elements in the list tolistand return itself for chaining.
dom('<li>Tobi</li>').appendTo('ul').addClass('user');
Return value for attributename:
varurl=dom('img').attr('src');
Set attributename toval.
dom('img').attr('src','image/of/maru.jpg');
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()
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')
Get css property value:
dom(el).css('width');
Set css property value:
dom(el).css('width','300px');
Set css property values:
dom(el).css({top:5,left:10});
Add a classname to all elements in the list.
dom('img').addClass('loading');
Remove classname to all elements in the list.
dom('img.loading').removeClass('loading');
Toggle classname, with optionalbool.
dom('img').toggleClass('loading');dom('img').toggleClass('loading',image.pending);
Check if any element in the list has the given classname.
dom('img').hasClass('loading');
Return a list of descendants matchingselector.
dom('.uploads').find('.complete').remove();
Iterate elements passing each one as a list, and its index:
dom('ul li').each(function(li,i){if(li.hasClass('complete')){li.remove();}});
Empties the elements.
varlist=dom('<div><a href="/meow.html">cute kitty</a></div>');assert(''==list.empty().html());
Iterate elements passing each one, and its index:
dom('ul li').forEach(function(li,i){if(li.className=='complete'){li.parentNode.removeChild(li);}});
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');
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 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');
Return aList containing theith element.
dom('ul li').at(1).remove();
Return aList containing the first element:
dom('ul li').first().remove();
Return aList containing the last element:
dom('ul li').last().remove();
Return the inner html.
Set the inner html tostr.
Return the text content.
Set text content tostr.
Return a cloned list of cloned nodes.
Set focus on the element.
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);
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.
npm install component-testmake testMIT
About
DOM traversal, manipulation and events aggregate library (like jQuery)