This is my expermimental JavaScript micro library to convince myself that working with the DOM can be easy and we don't always need to use jQuery.
Some examples using jQuery:
var $element = $('#example');
var id = $element.attr('id');
var href = $element.attr('href');
var parent = $element.parent();
var targetUrl = $element.data('target-url');
var next = $element.next();
var html = $element.html();
$element.css('border-color', 'red');
$element.appendClass('important');
$element.toggleClass('highlight');
$element.hide();The same functionality written without using any library:
var element = document.getElementById('example');
var id = element.id;
var href = element.href;
var parent = element.parentElement;
var targetUrl = element.dataset.targetUrl;
var next = element.nextElementSibling;
var html = element.innerHTML;
element.style.borderColor = 'red';
element.classList.add('important');
element.classList.toggle('highlight');
element.style.display = 'none';The code above will work in modern browsers. Some polyfills will be needed to support older browsers (IE < 9), but it is currently not the aim of this library.
There are no wrappers. Just some helpers. For everything else use native DOM methods like in the example above.
Selecting element(s) - these are just shortcuts:
var element, elements;
// element = document.getElementById('example');
element = dom.id('example');
// element = document.querySelector('[type=submit]')
element = dom.find('[type=submit]')
// elements = document.querySelectorAll('.buttons');
elements = dom.findAll('.buttons');Important! The last example returns Array instead of NodeList.
You can pass element as the first argument of find and findAll methods:
var inner = dom.find(element, '.inner');
var checkboxes = dom.findAll(element, '[type=checkbox]');If you want to work with array of elements, use forEach:
checkboxes.forEach(function(item) {
item.checked = !item.checked; // toggle checkbox
});Or while:
var i = checkboxes.length;
while (i--) {
checkboxes[i].checked = false;
}Some other helpers you can use (there are not many):
dom.remove(element); // remove element from the DOM
dom.empty(element); // remove all children from element
dom.insertAfter(element, referenceElement);
dom.insertBefore(element, referenceElement);
var form = dom.closest(element, 'form');For events use addEventListener or this shortcuts:
dom.on(element, 'click', function(e) {
// ...
});Event delegation can be achieved as follows:
dom.on(element, 'click', function(e) {
if (e.target.tagName === 'A') {
// ...
}
});To trigger an event simply call:
element.click();dom.ready is also available:
dom.ready(function(e) {
// ...
});Sorry, this part is missing right now :(
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent