<style>body{
    font-family: Arial;
    background: #ddd;
    padding:20px;
    margin-left: 300px;
}

.menu{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    overflow-y: scroll;
    width: 300px;
    padding:5px;
    background: white;
}

.menu a{
    display: block;
    padding:5px;
    color: #333;
    text-decoration: none;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    border-left: solid 1px #999;
    padding-left: 10px;
    margin-left: 5px;
}

.menu div{
    padding-left:10px;
    position: relative;
}

.menu a + div:before{
    content:"";
    position: absolute;
    left: 5px;
    top: 0;
    border: solid 5px #999;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.menu a + div:after{
    content:"";
    position: absolute;
    left: 6px;
    top: 0;
    border: solid 5px white;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

pre{
    margin:10px;
    border:solid 1px #ccc;
    padding: 20px;
    background: white;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    margin-bottom:30px;
}
code{
    padding: 5px;
    display: block;
    line-height: 12px;
    overflow: auto;
}

h1{
    font-size: 36px;
    padding:0 20px;
}

h2{
    color: #555;
    margin-top:30px 0;
    border-bottom: solid 3px #ccc;
}

h3, h4{
    color: #888;
    margin:10px;
    padding:5px 10px;
}

p{
    margin:10px 0;
    padding:0 10px;
}

section{
    margin-left: 20px;
}

.docyacode-block{
    margin: 20px 0;
    padding: 10px 20px;
    background-color: rgba(255,255,255,0.3);
}</style><script>// window.addEventListener('load', function(){
//     var docSections = document.querySelectorAll('[data-blockname]'),
//         menu = document.createElement('div');

//     menu.className = 'menu';

//     for(var i = 0; i < docSections.length; i++) {
//         var section = docSections[i],
//             sectionAnchor = document.createElement('a'),
//             sectionName = section.getAttribute('data-blockname');

//         section.insertBefore(sectionAnchor, section.firstChild);

//         var menuItem = document.createElement('a');
//         menuItem.innerText = sectionName;
//         menuItem.setAttribute('href', '#' + sectionName);

//         sectionAnchor.setAttribute('name', sectionName);
//         sectionAnchor.className = 'sectionAnchor';

//         menu.appendChild(menuItem);
//     }

//     document.body.insertBefore(menu, document.body.firstChild);
// });</script><div class="menu"><a href="#doc">doc</a><div><a href="#.find">.find</a><a href="#.findOne">.findOne</a><a href="#.closest">.closest</a><a href="#.is">.is</a><a href="#.addClass">.addClass</a><a href="#.removeClass">.removeClass</a><a href="#.on">.on</a><a href="#.off">.off</a><a href="#.append">.append</a><a href="#.prepend">.prepend</a><a href="#.isVisible">.isVisible</a><a href="#.addFunction">.addFunction</a></div></div><div class="docyacode-block" data-blockname="doc"><a name="doc"></a><h1>doc</h1>
<h1>What</h1>
<p>a small, simple, and fast DOM helper library</p>
<h1>Why?</h1>
<p>A few commonly used dom traverstal and event binding techniques are not easy to write in pure DOM, this provides a simple way to do them.</p>
<h1>Usage</h1>
<p>doc can be used very much like jQuery:</p>
<pre><code>var doc = require(&#39;doc-js&#39;);



doc(target); // NodeList</code></pre>
<p>where &#39;target&#39; can be a CSS selector, a HTMLElement, or a list of elements, eg:</p>
<pre><code>doc(&#39;.things&#39;); // List of nodes that have the class &#39;things&#39;</code></pre>
<p>There are two versions of every function; a legacy way, and a fluent way.</p>
<p>Legacy way example:</p>
<pre><code>doc.is(target, selector);</code></pre>
<p>Fluent way example:</p>
<pre><code>doc(target).is(selector)();</code></pre>
<p>Note that the fluent way will build a list of opperations to perform, and won&#39;t execute them untill you call the returned function:</p>
<pre><code>var thingsToDo = doc(target).addClass(&#39;things&#39;).is(&#39;.things&#39;);



// nothing touched yet...



// execute the opperations.

thingsToDo();</code></pre>
<h1>Goals</h1>
<h2>Easy to use</h2>
<h2>Tiny</h2>
<p><del>less than 1k minified</del></p>
<p>about 1.3k min&#39;d and gzipped (I added features..)</p>
<h2>Fast</h2>
<p><a href="http://jsperf.com/closest-element">http://jsperf.com/closest-element</a></p>
<h1>License</h1>
<p>MIT</p>
<section><div class="docyacode-block" data-blockname=".find"><a name=".find"></a><h2>.find</h2>
<p>finds elements that match the query within the scope of target</p>
<pre><code>//fluent

doc(target).find(query)();



//legacy

doc.find(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".findOne"><a name=".findOne"></a><h2>.findOne</h2>
<p>finds the first element that matches the query within the scope of target</p>
<pre><code>//fluent

doc(target).findOne(query)();



//legacy

doc.findOne(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".closest"><a name=".closest"></a><h2>.closest</h2>
<p>recurses up the DOM from the target node, checking if the current element matches the query</p>
<pre><code>//fluent

doc(target).closest(query)();



//legacy

doc.closest(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".is"><a name=".is"></a><h2>.is</h2>
<p>returns true if the target element matches the query</p>
<pre><code>//fluent

doc(target).is(query)();



//legacy

doc.is(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".addClass"><a name=".addClass"></a><h2>.addClass</h2>
<p>adds classes to the target</p>
<pre><code>//fluent

doc(target).addClass(query)();



//legacy

doc.addClass(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".removeClass"><a name=".removeClass"></a><h2>.removeClass</h2>
<p>removes classes from the target</p>
<pre><code>//fluent

doc(target).removeClass(query)();



//legacy

doc.removeClass(target, query);</code></pre>
</div><div class="docyacode-block" data-blockname=".on"><a name=".on"></a><h2>.on</h2>
<p>binds a callback to a target when a DOM event is raised.</p>
<pre><code>//fluent

doc(target/proxy).on(events, target[optional], callback)();</code></pre>
<p>note: if a target is passed to the .on function, doc&#39;s target will be used as the proxy.</p>
<pre><code>//legacy

doc.on(events, target, query, proxy[optional]);</code></pre>
</div><div class="docyacode-block" data-blockname=".off"><a name=".off"></a><h2>.off</h2>
<p>removes events assigned to a target.</p>
<pre><code>//fluent

doc(target/proxy).off(events, target[optional], callback)();</code></pre>
<p>note: if a target is passed to the .on function, doc&#39;s target will be used as the proxy.</p>
<pre><code>//legacy

doc.off(events, target, callback, proxy);</code></pre>
</div><div class="docyacode-block" data-blockname=".append"><a name=".append"></a><h2>.append</h2>
<p>adds elements to a target</p>
<pre><code>//fluent

doc(target).append(children);



//legacy

doc.append(target, children);</code></pre>
</div><div class="docyacode-block" data-blockname=".prepend"><a name=".prepend"></a><h2>.prepend</h2>
<p>adds elements to the front of a target</p>
<pre><code>//fluent

doc(target).prepend(children);



//legacy

doc.prepend(target, children);</code></pre>
</div><div class="docyacode-block" data-blockname=".isVisible"><a name=".isVisible"></a><h2>.isVisible</h2>
<p>checks if an element or any of its parents display properties are set to &#39;none&#39;</p>
<pre><code>//fluent

doc(target).isVisible();



//legacy

doc.isVisible(target);</code></pre>
</div><div class="docyacode-block" data-blockname=".addFunction"><a name=".addFunction"></a><h2>.addFunction</h2>
<p>Used to add functionality to doc. This is needed because of the way doc&#39;s fluent functions queue.</p>
<pre><code>doc.addFunction(&#39;myFunc&#39;, myFunc, fluentMyFunc);</code></pre>
<p>the fluentFunction propery only needs to be passed if needed, examples are .on and .off.</p>
</div></section></div>