Voyeur is a tiny (1.2kb) Javascript library that lets you traverse and manipulate the DOM the way it should have been.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
Gruntfile.js
LICENSE
README.md
Voyeur.js
Voyeur.min.js
bower.json
component.json
package.json

README.md

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.

Todo

  • Make Voyeur handle DOMSubtreeModified DOM changes with MutationObserver.

License

MIT License