A lightweight DOM selector and DOM manipulation class, using vanilla (ES6) JS (~250 lines of code). Inherited from the native Array class.
Just the basics things similar to the ones from jquery.
<style>
.selected{
font-weight:bold;
}
</style>
<ul id = 'list'></ul>
l('#list').css({border: '1px dotted #00a',opacity: 0.5});
l('#list').append('<li>new item</li>');
l('#list').on('click',event => {
const lTarget = l(event.target);
if(lTarget.is('li')){
lTarget.toggleClass('selected');
}
})
//lets add an item again - this time (for example purposes) by cloning the very first item on the list
//the [0] returns the first (native) Node. The .append accepts it, as well as strings
//or other LightDom object.
l('#list').append(l('#list li')[0]);
//example of iterating as native 'Node' element
l('#list li').forEach(node => {
node.style.padding = '5px';
});
Right now the only way is to just copy & paste the following file somewhere: https://raw.githubusercontent.com/kpion/lightdom/master/src/lightdom.js
1.0 - August 2018 :
- initial release
2.1 - October 2018 :
- the .append .prepend .before and .after methods now accept not only (string) HTML but also nodes.
- constructor accepts simply a Node (previously a HTMLElement)
- constructor now accepts (string) HTML