Voyeur.js-DOMを操作するための小さくて魅力的なライブラリ

おはようございます。 今日、GitHubで興味深いプロジェクトを見ました。 この小さなライブラリ（ Voyeur.min.js -1.2kb）は、その構文と優れた機能のために非常に魅力的です。







公式Webサイトのドキュメントを翻訳しなくても、コードは直感的に理解できます。 伝統的に、いくつかの例を挙げます。

アイテムを検索する

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; //
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コールバック関数

Voyeur.tag ... use（コールバック（要素））ルート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）配列

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご清聴ありがとうございました！