- ×Show All
Voyeur
http://adriancooney.github.io/voyeur.js
Voyeur is a tiny (1.2kb) Javascript library that lets you traverse and manipulate the DOM the way it should have been. See here for a demo, more information and documentation.
Warning
Voyeur is a great concept but I highly recommend you avoid it in production. There is serious performance issues yet to be worked out. See here.
Example
<body> <div> <header> <h1 id="title"><em><a href="/">Hello world!</a></em></h1> </header> <section> <ul> <li class="item"><a href="#">Navigation Item</a></li> <li class="item"><a href="#">Navigation Item</a></li> <li class="item"><a href="#">Navigation Item</a></li> <li class="item"><a href="#">Navigation Item</a></li> <li class="item"><a href="#">Navigation Item</a></li> </ul> </section> </div> </body>
//Lets get the title link Voyeur.div.header.h1.em.a.href = "http://google.com" Voyeur.find("#title").em.a.innerText = "New title!"; //Let's get those navigation items Voyeur.div.section.ul.li.use(function(li, i) { li.a.innerText = "Link #" + i; }); Voyeur.div.section.ul.li.eq(3).classList.add("Highlighted!"); //How about we create some content var content = Voyeur.create.div .section.mult(5).p.em.use(function(em) { em.textContext = "Hello world!"; }); Voyeur.div.appendChild(content);
Usage
Install via bower (courtesy of @pid)
bower install Voyeur
Install via component
component install dunxrion/voyeur.js
Include the script somewhere on the page.
<script type="text/javascript" src="Voyeur.min.js"></script>
Outside
Voyeur has managed to inspire a couple of other spin-off projects.
- https://gist.github.com/yckart/6627671 - @yckart managed to whittle down the basic functionality to an incredibly 140 bytes.
- http://nbubna.github.io/HTML/ - @nbubna has created HTML.js, check it out, it's worth it.
Todo
- Make Voyeur handle
DOMSubtreeModifiedDOM changes withMutationObserver
.
License