Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DOM Util Module</title>
</head>
<body>
    <div id="main-div"></div>

    <script>
        var DOMUtil = (function () {
            // an associative array of document fragments used to append elements with buffer
            var fragmentsBuffer = {};

            function getElement(selector) {
                return document.querySelector(selector);
            }

            function getElements(selector) {
                return document.querySelectorAll(selector);
            }

            function addElement(parentSelector, element) {
                var parent = getElement(parentSelector);
                parent.appendChild(element);
            }

            function removeElements(parentSelector, childSelector) {
                var elements = document.querySelectorAll(selector);
                for (var i = 0, len = elements.length; i < len ; i += 1) {
                    elements[i].parentNode.removeChild(elements[i]);
                }
                //TODO:
                var elementsToRemove = getElements(parentSelector + " " + childSelector);

                for (var i = 0; i < elementsToRemove.length; i += 1) {
                    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
                }
            }

            function attachEventHandler(selector, eventType, handler) {
                var elements = getElements(selector);
                //elements
                for (var i = 0, len = elements.length; i < len ; i += 1) {
                    if (elements[i].addEventListener) {
                        elements[i].addEventListener(eventType, handler, false);
                    } else if (document.attachEvent) {
                        elements[i].attachEvent("on" + eventType, handler);
                    }
                    else {
                        elements[i]["on" + eventType] = handler;
                    }
                }
            }

            function addElementWithBuffer(parentSelector, element) {
                if (!fragmentsBuffer[parentSelector]) {
                    fragmentsBuffer[parentSelector] = {
                        fragment: document.createDocumentFragment(),
                        length: 0
                    };
                }

                fragmentsBuffer[parentSelector].fragment.appendChild(element);
                //we dont calculate childNodes every time because
                //it is slow and that's why there is the length property
                fragmentsBuffer[parentSelector].length += 1;

                if (fragmentsBuffer[parentSelector].length === 100) {
                    // the fragment has reached the buffer maximum size and appends it
                    // to the DOM tree and after that the buffer is emptied
                    var parent = getElement(parentSelector);
                    parent.appendChild(fragmentsBuffer[parentSelector].fragment);
                    delete fragmentsBuffer[parentSelector];
                    //     fragmentsBuffer[parentSelector] = null;
                    // the same can be done this way but with delete it is more clear
                }
            }

            return {
                addElement: addElement,
                removeElements: removeElements,
                attachEventHandler: attachEventHandler,
                addElementWithBuffer: addElementWithBuffer
            };
        })();

        function eventHandler() {
            alert("Event!");
        }

        var divToAdd = document.createElement("div");
        divToAdd.innerText = "Added Div!";
        divToAdd.setAttribute("style", "border: 5px solid red; width:200px; height:200px; font-size: 30px; " +
                "text-align: center; background-color: yellow; width:300px;");
        DOMUtil.addElement("#main-div", divToAdd);

        DOMUtil.attachEventHandler("#main-div", "click", eventHandler);

        //demonstrating the buffer append -> wont append elements if they are less than 100
        for (var i = 0; i < 100; i += 1) {
            var divToAdd = document.createElement("div");
            divToAdd.innerText = "buffer-div";
            divToAdd.setAttribute("style", "border: 1px solid blue; width:55px; height:55px; float:left;");
            DOMUtil.addElementWithBuffer("#main-div", divToAdd);
        }
    </script>
</body>
</html>