DOM Enlightenment Book

by J. Albert Bowden

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<ul><li>1</li><li>2</li></ul>
<ol><li>1</li><li>2</li></ol>

JavaScript

(function() {

    //Store a reference to the head object, window in the browser or global on the server
    var rootObject = this;
    var doc = rootObject.document;

    //return a new hippo object containing the node elements descibed by the elements parameter
    var hippo = function(elements, context) {
        return new CreateHippoObject(elements, context);
    };

    var CreateHippoObject = function(elements, context) {

        //if no elements assume html element was sent
        if (!elements) {
            this.length = 1;
            this[0] = document.documentElement;
            return this;
        }

        //if HTML string, construct domfragment, fill object, then return object
        if (typeof elements === 'string' && elements.charAt(0) === "<" && elements.charAt(elements.length - 1) === ">" && elements.length >= 3) {
            var divElm = document.createElement('div');
            var docFrag = document.createDocumentFragment();
            docFrag.appendChild(divElm);
            docFrag.querySelector('div').innerHTML = elements;
            this.length = 1;
            this[0] = docFrag.querySelector('div').firstChild;
            return this;
        }

        //if a single element node reference is passed, fill object, return object
        if (typeof elements === 'object' && elements.nodeName) {
            this.length = 1;
            this[0] = elements;
            return this;
        }

        //other wise assume selector string, nodelist, or array, and use context if its passed
        var nodes;

        if (typeof elements !== 'string') { //its not a string so its an array or nodelist
            nodes = elements;
        } else { //if its a string create a nodelist, use context if provided
            nodes = (doc.querySelectorAll(context)[0] || doc).querySelectorAll(elements);
        }
        //loop over array or nodelist and place in fill object
        for (var i = 0; i < nodes.length; i++) {
            this[i] =...