- 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/dom
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
vardom=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
List
itself
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 tolist
and 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 thei
th 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 test
MIT
About
DOM traversal, manipulation and events aggregate library (like jQuery)