HTML is a small, extensible library to help you use the DOM in a simpler, more direct way. See here for a demo, more information and documentation. Thanks to Adrian Cooney for the inspiration and starting point for this project.
Download: HTML.min.js or HTML.js
Bower: bower install HTML
NPM: npm install html.js
<script src="dist/HTML.min.js"></script>
<body>
<header>
<h1 id="title"><a href="/">HTML!</a></h1>
</header>
<section>
<ul>
<li><a href="#1">Tab 1</a></li>
<li><a href="#2">Tab 2</a></li>
<li><a href="#3">Tab 3</a></li>
<li><a href="#4">Tab 4</a></li>
<li><a href="#5">Tab 5</a></li>
</ul>
</section>
</body>// direct traversal
var url = HTML.body.div.header.h1.a.href;
// easy, contextual search
HTML.body.find("#title a").textContent = "New title!";
// an each() function to use the selected node or nodes
HTML.body.section.ul.li.each(function(li, i) {
li.a.textContent = "Link #" + i;
});
// an only() function to narrow your selection
var list = HTML.find('li');
list.only(4).classList.add('highlighted'); // by index
list.only(0, 4).classList.remove('highlighted'); // by slice
list.only('.highlighted').style.fontStyle = 'italic'; // by selector
list.only(function(l,i){return i%2;}).textContent += 'Odd'; // by functionThe [minified][all] version automatically includes
find(),each(),only(),add()andremove() (so far).
The one "official" extensions (so far) is:
// use simple expressions with `add()` ([emmet][emmet] w/o grouping or numbering)
var content = HTML.body.add('div>section*5>p>').each(function(p) {
p.textContext = "Hello world!";
});- 2013-08-01 v0.9.0 (estimated first release)