Voyeur.js — маленькая и привлекательная библиотека для работы с DOM

Доброго времени суток уважаемые читатели. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.

Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:

Поиск элементов

Voyeur.div.h1; // body>div>h1. Возвращает элемент h1
Voyeur.div.h1.innerHTML = "Habrahabr"; // 
Voyeur.div.ul.li; // Возвращает массив элементов списка

Voyeur.find("#example"); // Возвращает единственную ноду
Voyeur.find(".example"); // Возвращает массив нод 
Voyeur.find("#example").h1.em; // 

Callback функция

Voyeur.tag...use( callback(element) ) Root HTMLElement

Voyeur.div.ul.li.use(); // Возвращает элемент div
Voyeur.div.ul.li.use(function(li, i) {
        // Цикл по элементам списка
        li.innerHTML = "List item #" + i;
});

Voyeur.div.ul.use(function(ul) {
        ul.style.background = "blue";
        // Также возможно использовать li
        ul.li; //..
});

Создание элементов

Voyeur.create.tag...mult( factor ) Array

Voyeur.create.div; // Возвращает элемент div
Voyeur.create.div.h1; // Возвращает элемент h1 с родителем div
Voyeur.create.div.h1.em; //

Voyeur.create.ul.li.mult(10).use(function(li, i) { // Создаем 10 элементов li 
     li.innerHTML = "Created list items!"; // 
});

//Voyeur.tag...eq( begin , end ) HTMLElement|Array
Voyeur.create.ul.li.mult(10).eq(7).innerHTML = "The 8th item.";

Voyeur.ul.li.eq(2, 6).use(function(li, i) {
     li.create.em.innerText = "Хабр!";
});

Большое спасибо за внимание!

Автор: ilusha_sergeevich

Источник