Voyeur.js is a small and attractive library for working with DOM

Good day, dear habrazhiteli. Today I saw one interesting project on GitHub . This small library ( Voyeur.min.js - 1.2kb) is very attractive for its syntax and good functionality.







Even without translating the documentation from the official site , the code can be understood intuitively. By tradition, I will give a few examples:

')

Search for items

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 function

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; //.. }); 

Creating items

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 = "!"; }); 

Thank you very much for your attention!