erikroyall/hilo

View on GitHub
docs/dom.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>

<html>
<head>
  <title>dom.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="ajax.html">
                ajax.js
              </a>
            
              
              <a class="source" href="anim.html">
                anim.js
              </a>
            
              
              <a class="source" href="core.html">
                core.js
              </a>
            
              
              <a class="source" href="detect.html">
                detect.js
              </a>
            
              
              <a class="source" href="dom.html">
                dom.js
              </a>
            
              
              <a class="source" href="end.html">
                end.js
              </a>
            
              
              <a class="source" href="evt.html">
                evt.js
              </a>
            
              
              <a class="source" href="fx.html">
                fx.js
              </a>
            
              
              <a class="source" href="legacy.html">
                legacy.js
              </a>
            
              
              <a class="source" href="misc.html">
                misc.js
              </a>
            
              
              <a class="source" href="more.html">
                more.js
              </a>
            
              
              <a class="source" href="polyfill.html">
                polyfill.js
              </a>
            
              
              <a class="source" href="sizzle.html">
                sizzle.js
              </a>
            
              
              <a class="source" href="start.html">
                start.js
              </a>
            
              
              <a class="source" href="test.html">
                test.js
              </a>
            
              
              <a class="source" href="util.html">
                util.js
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>dom.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <h3 id="main-dom-class">Main DOM Class</h3>
<p><strong> Params: </strong></p>
<ul>
<li><code>els</code> {Array} The elements to manipulate</li>
<li><code>sel</code> {String} The selector used</li>
</ul>
<p><strong> Examples </strong></p>
<pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.querySelectorAll(p:first-child);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom ([<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"div"</span>)]);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom ([<span class="hljs-built_in">document</span>.getElementByid(<span class="hljs-string">"box"</span>)]);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">"hidden"</span>));
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">"mark"</span>));
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Dom</span> <span class="hljs-params">(els, sel)</span> </span>{
    <span class="hljs-keyword">var</span> _i, _l;

    <span class="hljs-comment">/* Note that `this` is an object and NOT an Array */</span>

    <span class="hljs-comment">/* Loop thorugh the NodeList and set `this[index]` for `els[index]` */</span>
    <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = els.length; _i &lt; _l; _i += <span class="hljs-number">1</span>) {
      <span class="hljs-keyword">this</span>[_i] = els[_i];
    }

    <span class="hljs-comment">/* Useful for looping through as ours is an object and not an array */</span>
    <span class="hljs-keyword">this</span>.length = els.length;

    <span class="hljs-comment">/* Know what selector is used to select the elements */</span>
    <span class="hljs-keyword">this</span>.sel = sel;
  }

  <span class="hljs-comment">/* Make it _look_ like an array */</span>
  Dom.prototype = <span class="hljs-built_in">Array</span>.prototype;

  extend(Dom.prototype, {
    <span class="hljs-comment">/* Set the constructor to Dom. It defaults to Array. We don't that */</span>
    constructor: Dom
  });</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <h3 id="hilo-css-helper-methods">Hilo CSS Helper Methods</h3>

            </div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p><strong><em>unhyph</em></strong> <em>Internal</em></p>
<p>Return a string repacing all <code>-</code>s with <code>&quot;&quot;</code> and making the letter
next to every <code>-</code> uppercase</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String} CSS Property Name</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>unhyph(<span class="hljs-string">"background-color"</span>); <span class="hljs-comment">// backgroundColor</span>
unhyph(<span class="hljs-string">"color"</span>); <span class="hljs-comment">// color</span>
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unhyph</span> <span class="hljs-params">(prop)</span> </span>{
    <span class="hljs-keyword">return</span> prop.toLowerCase().replace(<span class="hljs-regexp">/-(.)/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(m, m1)</span> </span>{
      <span class="hljs-keyword">return</span> m1.toUpperCase();
    });
  }</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p><strong><em>unitize</em></strong> <em>Internal</em></p>
<p>Add necessary suffix to the number for certain CSS properties
<em>This will later be used by .css() and a number of other methods</em></p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>unit</code>: {String|Number} Valid CSS Unit (<code>unitize()</code> Returns the same thing if {String})</li>
<li><code>prop</code>: {String} CSS Property Name</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>unitize(<span class="hljs-string">"background-color"</span>); <span class="hljs-comment">// backgroundColor</span>
unhyph(<span class="hljs-string">"color"</span>); <span class="hljs-comment">// color</span>
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unitize</span> <span class="hljs-params">(unit, prop)</span> </span>{

    <span class="hljs-comment">/* All the CSS props. that are to be defaulted to px values */</span>
    <span class="hljs-keyword">var</span> pixel = {
      <span class="hljs-string">"width"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"maxWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"minWidth"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"height"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"maxHeight"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"minHeight"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"borderWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"borderTopWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"borderLeftWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"borderBottomWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"borderRightWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"borderRadius"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"outlineWidth"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"outlineOffset"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"strokeWidth"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"fontSize"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"lineHeight"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"letterSpacing"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"textIndent"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"textUnderlineWidth"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"margin"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"marginTop"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"marginLeft"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"marginBottom"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"marginRight"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"padding"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"paddingTop"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"paddingLeft"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"paddingBottom"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"paddingRight"</span>: <span class="hljs-literal">true</span>,

      <span class="hljs-string">"top"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"left"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"bottom"</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-string">"right"</span>: <span class="hljs-literal">true</span>
    };

    <span class="hljs-comment">/* String values are not be unitized no matter what */</span>
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> unit === <span class="hljs-string">"string"</span>) {
      <span class="hljs-keyword">return</span> unit;
    }

    <span class="hljs-comment">/* If the property is present in the previously mentioned
       object, the unit is suffixed with "px" */</span>
    <span class="hljs-keyword">if</span> (pixel[prop] === <span class="hljs-literal">true</span>) {
      <span class="hljs-keyword">return</span> unit + <span class="hljs-string">"px"</span>;
    }

    <span class="hljs-keyword">return</span> unit;
  }</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p><strong><em>hilo.create</em></strong></p>
<p>Create an element</p>
<p><strong>Params</strong>:</p>
<ul>
<li><code>tagName</code>: {String} Tag Name or Node name of element</li>
<li><code>attrs</code>: {Object} An object containing the attributes and values</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$.create(<span class="hljs-string">"div"</span>, {
  <span class="hljs-keyword">class</span>: <span class="hljs-string">"post"</span>,
  <span class="hljs-string">"data-id"</span>: <span class="hljs-number">2</span>
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>  hilo.create = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tagName, attrs)</span> </span>{
    <span class="hljs-keyword">var</span> el = <span class="hljs-keyword">new</span> Dom([<span class="hljs-built_in">document</span>.createElement(tagName)]), key;

    <span class="hljs-keyword">if</span> (attrs) {
      <span class="hljs-comment">/* Add Class if the `className` is set */</span>
      <span class="hljs-keyword">if</span> (attrs.className) {
        el.addClass(attrs.className);
        <span class="hljs-keyword">delete</span> attrs.className;
      }

      <span class="hljs-comment">/* Set html to if `text` content is given */</span>
      <span class="hljs-keyword">if</span> (attrs.text) {
        el.html(attrs.text);
        <span class="hljs-keyword">delete</span> attrs.text;
      }

      <span class="hljs-comment">/* Set other attributes */</span>
      <span class="hljs-keyword">for</span> (key <span class="hljs-keyword">in</span> attrs) {
        <span class="hljs-keyword">if</span>(attrs.hasOwnProperty(key)) {
          el.attr(key, attrs[key]);
        }
      }
    }

    <span class="hljs-keyword">return</span> el;
  };

  extend(Dom.prototype, {</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <h2 id="helper-functions">Helper Functions</h2>

            </div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.each</em></strong></p>
<p>Execute a function on selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
  doSomethingWith(e);
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    each: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
      <span class="hljs-keyword">this</span>.map(fn);
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; <span class="hljs-comment">/* return the current Dom instance */</span>
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.map</em></strong></p>
<p>Return the results of executing a function
on all the selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div.need-cf"</span>).map(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{
  doSomethingWith(e);
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    map: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
      <span class="hljs-keyword">var</span> results = []
        , _i
        , _l;

      <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = <span class="hljs-keyword">this</span>.length; _i &lt; _l; _i += <span class="hljs-number">1</span>) {
        results.push(fn.call(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">this</span>[_i], _i));
      }

      <span class="hljs-keyword">return</span> results;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.one</em></strong></p>
<p>Map on selected elements and return them based
on the number of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>    one: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
      <span class="hljs-keyword">var</span> m = <span class="hljs-keyword">this</span>.map(fn);
      <span class="hljs-keyword">return</span> m.length &gt; <span class="hljs-number">1</span> ? m : m[<span class="hljs-number">0</span>];
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.first</em></strong></p>
<p>Execute a function on the first selected element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div"</span>).first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{
  <span class="hljs-built_in">console</span>.log(e + <span class="hljs-string">" is the first div"</span>);
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    first: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
      <span class="hljs-keyword">return</span> fn(<span class="hljs-keyword">this</span>[<span class="hljs-number">0</span>]);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.filter</em></strong></p>
<p>Filter the selected element and return the
elements that pass the test (or return true)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div"</span>).filter(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
  <span class="hljs-keyword">return</span> el.className.split(<span class="hljs-string">"hidden"</span>).length &gt; <span class="hljs-number">1</span>;
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    filter: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
      <span class="hljs-keyword">var</span> len = <span class="hljs-keyword">this</span>.length &gt;&gt;&gt; <span class="hljs-number">0</span>
        , _i
        , t = <span class="hljs-built_in">Object</span>(<span class="hljs-keyword">this</span>)
        , res = []
        , val;

      <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; len; _i++) {
        <span class="hljs-keyword">if</span> (_i <span class="hljs-keyword">in</span> t) {
          val = t[_i];

          <span class="hljs-keyword">if</span> (fn.call(<span class="hljs-keyword">this</span>, val, _i, t)) {
            res.push(val);
          }
        }
      }

      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(res);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <h2 id="element-selections-etc-">Element Selections, etc.</h2>

            </div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.get</em></strong></p>
<p>Get a JavaScript Array containing selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"script"</span>).get();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    get: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">var</span> els = [];

      <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        els.push(el);
      });

      <span class="hljs-keyword">return</span> els;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.firstEl</em></strong></p>
<p>Return first element of the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).firstEl().show();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    firstEl: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[<span class="hljs-number">0</span>]]);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.lastEl</em></strong></p>
<p>Return last element of the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).lastEl().show();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    lastEl: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[<span class="hljs-keyword">this</span>.length - <span class="hljs-number">1</span>]]);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.el</em></strong></p>
<p>Return nth element of the selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>place</code>: {Number} The index of the element (Starts from 1)</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).el(<span class="hljs-number">3</span>).show();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    el: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(place)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[place - <span class="hljs-number">1</span>]]);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.children</em></strong></p>
<p>Return the children of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>sel</code>: {String} Optional filtering selector</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code><span class="hljs-keyword">var</span> childrenOfContainer = $(<span class="hljs-string">"div.container"</span>).children();
$(<span class="hljs-string">"div.container"</span>).children(<span class="hljs-string">":not(.hidden)"</span>).addClass(<span class="hljs-string">"me"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    children: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(sel)</span> </span>{
      <span class="hljs-keyword">var</span> children = [], _i, _l;

      <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        <span class="hljs-keyword">var</span> childNodes = select(sel ? sel : <span class="hljs-string">"*"</span>, el);

        <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = childNodes.length; _i &lt; _l; _i += <span class="hljs-number">1</span>) {
          children = children.concat(childNodes[_i]);
        }
      });

      <span class="hljs-keyword">return</span> children;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.parents</em></strong></p>
<p>Return the parents of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).parent().hide()
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    parents: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">var</span> pars = [];

      <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        pars = pars.concat(el.parentElement);
      });

      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(pars);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.parent</em></strong></p>
<p>Return the parent of the first selected element</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).parent().hide()
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    parent: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([el.parentElement]);
      });
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.rel</em></strong></p>
<p>Return relatives of selected elements based
on the given relation</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>sul</code>: {String} Relation</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).rel(<span class="hljs-string">"nextSibling"</span>).addClass(<span class="hljs-string">"next-to-editor"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    rel: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(sul)</span> </span>{
      <span class="hljs-keyword">var</span> els = [];

      <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        els.push(el[sul]);
      });

      <span class="hljs-keyword">return</span> els;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.next</em></strong></p>
<p>Return next sibling elements of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).next().addClass(<span class="hljs-string">"next-to-editor"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    next: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rel(<span class="hljs-string">"nextElementSibling"</span>);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.prev</em></strong></p>
<p>Return next sibling elements of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).prev().addClass(<span class="hljs-string">"prev-to-editor"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    prev: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rel(<span class="hljs-string">"previousElementSibling"</span>);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.html</em></strong></p>
<p>Set or return innerHTML of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be inserted</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).html(<span class="hljs-string">"first-p"</span>);
<span class="hljs-keyword">var</span> html = $(<span class="hljs-string">"span"</span>).html();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    html: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(htmlCode)</span> </span>{
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> htmlCode !== <span class="hljs-string">"undefined"</span>) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
          el.innerHTML = htmlCode;
        });
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el.innerHTML;
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.empty</em></strong></p>
<p>Empty the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#todo-list"</span>).empty();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    empty: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.html(<span class="hljs-string">""</span>);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.append</em></strong></p>
<p>Append html to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be appeneded</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).append(<span class="hljs-string">" - From the first p child"</span>)
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    append: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(html)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        el.innerHTML += html;
      });
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.prepend</em></strong></p>
<p>Prepend html to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be appeneded</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).append(<span class="hljs-string">" - From the first p child"</span>)
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    prepend: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(html)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        el.innerHTML = html + el.innerHTML;
      });
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.value</em></strong></p>
<p>Get or set the value attribute of the selected element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>val</code>: {String} Value to set to</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#my-form"</span>).children(<span class="hljs-string">"input#name"</span>).value();
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    value: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(val)</span> </span>{
      <span class="hljs-keyword">if</span> (val) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          el.value = val;
        });
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el.value;
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.id</em></strong></p>
<p>Get or set the ID of first element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>id</code>: {String} ID to set</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.rect"</span>).first().id(<span class="hljs-string">"square"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    id: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(id)</span> </span>{
      <span class="hljs-keyword">if</span> (id) {</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>Setting id of only one element because
id is intended to be an unique identifier</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
          el.id = id;
        });
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el.id;
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <h3 id="classes-and-ids">Classes and IDs</h3>

            </div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.class</em></strong></p>
<p>Add, remove, or check class(es)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>action</code>: {String} Action to take (“add”, “remove”, “has”)</li>
<li><code>className</code>: {String|Array} Class(es) to add or remove</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).class(<span class="hljs-string">"add"</span>, <span class="hljs-string">"no-js"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"div#editor"</span>).class(<span class="hljs-string">"remove"</span>, <span class="hljs-string">"no-js"</span>);
</code></pre><pre><code><span class="hljs-keyword">var</span> isHidden = $(<span class="hljs-string">"p"</span>).class(<span class="hljs-string">"has"</span>, <span class="hljs-string">"hidden"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-string">"class"</span>: feature.classList === <span class="hljs-literal">true</span> ? <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(action, className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        <span class="hljs-keyword">var</span> _i, parts, contains, res = [];

        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> className === <span class="hljs-string">"string"</span>) { <span class="hljs-comment">// A String</span>
          parts = className.split(<span class="hljs-string">" "</span>);

          <span class="hljs-keyword">if</span> (parts.length === <span class="hljs-number">1</span>) { <span class="hljs-comment">// String, one class</span>
            contains = el.classList.contains(className);

            <span class="hljs-keyword">switch</span> (action) {
              <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
                <span class="hljs-keyword">if</span> (!contains) {
                  el.classList.add(className);
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
                <span class="hljs-keyword">if</span> (contains) {
                  el.classList.remove(className);
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
                res = <span class="hljs-literal">true</span>;
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains) {
                    el.classList.remove(parts[_i]);
                  } <span class="hljs-keyword">else</span> {
                    el.classList.add(parts[_i]);
                  }
                }
              } <span class="hljs-keyword">break</span>;
            }
          } <span class="hljs-keyword">else</span> { <span class="hljs-comment">// String, many classes</span>
            contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
              <span class="hljs-keyword">return</span> el.classList.contains(className);
            };

            <span class="hljs-keyword">switch</span> (action) {
              <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (!contains(parts[_i])) {
                    el.classList.add(parts[_i]);
                  }
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                    el.classList.remove(parts[_i]);
                  }
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  res.push(contains(parts[_i]));
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                    el.classList.remove(parts[_i]);
                  } <span class="hljs-keyword">else</span> {
                    el.classList.add(parts[_i]);
                  }
                }
              } <span class="hljs-keyword">break</span>;
            }
          }
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (className.length) { <span class="hljs-comment">// Array</span>
          parts = className;

          contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
            <span class="hljs-keyword">return</span> el.classList.contains(className);
          };

          <span class="hljs-keyword">switch</span> (action) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (!contains(parts[_i])) {
                  el.classList.add(parts[_i]);
                }
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                  el.classList.remove(parts[_i]);
                }
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                res.push(contains(parts[_i]));
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                  el.classList.remove(parts[_i]);
                } <span class="hljs-keyword">else</span> {
                  el.classList.add(parts[_i]);
                }
              }
            } <span class="hljs-keyword">break</span>;
          }
        }

        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> res === <span class="hljs-string">"boolean"</span> ? res : res.every(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el === <span class="hljs-literal">true</span>;
        });
      });
    } : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(action, className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        <span class="hljs-keyword">var</span> _i, parts, contains, res = [];

        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> className === <span class="hljs-string">"string"</span>) {
          parts = className.split(<span class="hljs-string">" "</span>);

          <span class="hljs-keyword">if</span> (parts.length === <span class="hljs-number">1</span>) {
            contains = el.className.split(className).length &gt; <span class="hljs-number">1</span>;

            <span class="hljs-keyword">switch</span> (action) {
              <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
                <span class="hljs-keyword">if</span> (!contains) {
                  el.className += <span class="hljs-string">" "</span> +  (className);
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
                <span class="hljs-keyword">if</span> (contains) {
                  el.className.replace(className, <span class="hljs-string">""</span>);
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
                res = contains;
               
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains) {
                    el.className.replace(className, <span class="hljs-string">""</span>);
                  } <span class="hljs-keyword">else</span> {
                    el.className += <span class="hljs-string">" "</span> +  className;
                  }
                }
              } <span class="hljs-keyword">break</span>;
            }
          } <span class="hljs-keyword">else</span> {
            contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
              <span class="hljs-keyword">return</span> el.className.split(className).length &gt; <span class="hljs-number">1</span>;
            };

            <span class="hljs-keyword">switch</span> (action) {
              <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (!contains(parts[_i])) {
                    el.className += <span class="hljs-string">" "</span> +  parts[_i];
                  }
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                    el.className.replace(parts[_i], <span class="hljs-string">""</span>);
                  }
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  res.push(contains(parts[_i]));
                }
              } <span class="hljs-keyword">break</span>;

              <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
                <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                  <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                    el.className.replace(parts[_i], <span class="hljs-string">""</span>);
                  } <span class="hljs-keyword">else</span> {
                    el.className += <span class="hljs-string">" "</span> +  parts[_i];
                  }
                }
              } <span class="hljs-keyword">break</span>;
            }
          }
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (className.length) {
          parts = className;
          
          contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
            <span class="hljs-keyword">return</span> el.className.split(className).length &gt; <span class="hljs-number">1</span>;
          };

          <span class="hljs-keyword">switch</span> (action) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (!contains(parts[_i])) {
                  el.className += <span class="hljs-string">" "</span> +  parts[_i];
                }
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                  el.className.replace(parts[_i], <span class="hljs-string">""</span>);
                }
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                res.push(contains(parts[_i]));
              }

            } <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
              <span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i &lt; parts.length; _i += <span class="hljs-number">1</span>) {
                <span class="hljs-keyword">if</span> (contains(parts[_i])) {
                  el.className.replace(parts[_i], <span class="hljs-string">""</span>);
                } <span class="hljs-keyword">else</span> {
                  el.className += <span class="hljs-string">" "</span> +  parts[_i];
                }
              }
            } <span class="hljs-keyword">break</span>;
          }
        }

        <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> res === <span class="hljs-string">"boolean"</span> ? res : res.every(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el === <span class="hljs-literal">true</span>;
        });
      });
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.addClass</em></strong></p>
<p>Adds class(es) to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to add</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).addClass(<span class="hljs-string">"paragraph"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    addClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"add"</span>, className);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.removeClass</em></strong></p>
<p>Remove class(es) from selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to remove</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).removeClass(<span class="hljs-string">"hidden"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    removeClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"remove"</span>, className);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.hasClass</em></strong></p>
<p>Check if selected elements have the specified class(es)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to check if exists</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"pre"</span>).hasClass(<span class="hljs-string">"prettyprint"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    hasClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"has"</span>, className);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.toggleClass</em></strong></p>
<p>Add class(es) if it/they do(es) not exist(s),
remove if exist(s)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to toggle</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">".someClass"</span>).on(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
  $(<span class="hljs-keyword">this</span>).toggleClass(<span class="hljs-string">"opaque"</span>);
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    toggleClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"toggle"</span>, className);
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.attr</em></strong></p>
<p>Set or return attribute values</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>name</code>: {String} Name of attribute</li>
<li><code>val</code>: {String} Value of attribute</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).attr(<span class="hljs-string">"hidden"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"div.edit"</span>).attr(<span class="hljs-string">"contentEditable"</span>, <span class="hljs-string">"true"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"body"</span>).attr(<span class="hljs-string">"hilo"</span>, <span class="hljs-string">"0.1.0"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    attr: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(name, val)</span> </span>{
      <span class="hljs-keyword">if</span>(val) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
          el.setAttribute(name, val);
        });
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
          <span class="hljs-keyword">return</span> el.getAttribute(name);
        });
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-38">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-38">&#182;</a>
              </div>
              <h3 id="hilo-css">Hilo CSS</h3>

            </div>
            
        </li>
        
        
        <li id="section-39">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-39">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.css</em></strong></p>
<p>Set or return css property values</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String|Object} Name of the propety | Properties</li>
<li><code>value</code>: {String} Value of property</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).css(<span class="hljs-string">"margin-left"</span>, <span class="hljs-string">"10em"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"p.round"</span>).css({
  <span class="hljs-string">"border-radius"</span>: <span class="hljs-number">10</span>,
  width: <span class="hljs-number">100</span>
});
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    css: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(prop, value)</span> </span>{
      <span class="hljs-keyword">var</span> unhyphed;

      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> prop === <span class="hljs-string">"string"</span>) {
        unhyphed = unhyph(prop);

        <span class="hljs-keyword">if</span> (value) {
          <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
            el.style[unhyphed] = unitize(value, unhyphed);
          });
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
            <span class="hljs-keyword">return</span> el.style[unhyphed];
          });
        }
      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> prop === <span class="hljs-string">"object"</span>) {
        forIn(prop, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(pr)</span> </span>{
          unhyphed = unhyph(pr);

          <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
            el.style[unhyphed] = unitize(prop[pr], unhyphed);
          });
        }, <span class="hljs-keyword">this</span>);
      }
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-40">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-40">&#182;</a>
              </div>
              <p><strong><em>Hilo.Dom.prototype.computed</em></strong></p>
<p>Get computed property</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String|Object} Name of property</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#box"</span>).computed(<span class="hljs-string">"width"</span>);
</code></pre>
            </div>
            
            <div class="content"><div class='highlight'><pre>    computed: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(prop)</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
        <span class="hljs-keyword">return</span> win.getComputedStyle(el)[prop];
      });
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-41">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-41">&#182;</a>
              </div>
              <p>Get outer width</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
    outerWidth: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"width"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingLeft"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingRight"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderLeft"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderRight"</span>)) + <span class="hljs-string">"px"</span>;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-42">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-42">&#182;</a>
              </div>
              <p>Get inner width</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
    innerWidth: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"width"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingLeft"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingRight"</span>)) + <span class="hljs-string">"px"</span>;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-43">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-43">&#182;</a>
              </div>
              <p>Get outer height</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
    outerHeight: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"height"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingTop"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingBottom"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderTop"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderBottom"</span>)) + <span class="hljs-string">"px"</span>;
    },</pre></div></div>
            
        </li>
        
        
        <li id="section-44">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-44">&#182;</a>
              </div>
              <p>Get inner height</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
    innerHeight: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"height"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingTop"</span>)) + 
      <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingBottom"</span>)) + <span class="hljs-string">"px"</span>;
    }
  });</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>