SHARE
TWEET

Untitled

a guest Apr 30th, 2013 118 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>DOM Util Module</title>
  5. </head>
  6. <body>
  7.     <div id="main-div"></div>
  8.  
  9.     <script>
  10.         var DOMUtil = (function () {
  11.             // an associative array of document fragments used to append elements with buffer
  12.             var fragmentsBuffer = {};
  13.  
  14.             function getElement(selector) {
  15.                 return document.querySelector(selector);
  16.             }
  17.  
  18.             function getElements(selector) {
  19.                 return document.querySelectorAll(selector);
  20.             }
  21.  
  22.             function addElement(parentSelector, element) {
  23.                 var parent = getElement(parentSelector);
  24.                 parent.appendChild(element);
  25.             }
  26.  
  27.             function removeElements(parentSelector, childSelector) {
  28.                 var elements = document.querySelectorAll(selector);
  29.                 for (var i = 0, len = elements.length; i < len ; i += 1) {
  30.                     elements[i].parentNode.removeChild(elements[i]);
  31.                 }
  32.                 //TODO:
  33.                 var elementsToRemove = getElements(parentSelector + " " + childSelector);
  34.  
  35.                 for (var i = 0; i < elementsToRemove.length; i += 1) {
  36.                     elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
  37.                 }
  38.             }
  39.  
  40.             function attachEventHandler(selector, eventType, handler) {
  41.                 var elements = getElements(selector);
  42.                 //elements
  43.                 for (var i = 0, len = elements.length; i < len ; i += 1) {
  44.                     if (elements[i].addEventListener) {
  45.                         elements[i].addEventListener(eventType, handler, false);
  46.                     } else if (document.attachEvent) {
  47.                         elements[i].attachEvent("on" + eventType, handler);
  48.                     }
  49.                     else {
  50.                         elements[i]["on" + eventType] = handler;
  51.                     }
  52.                 }
  53.             }
  54.  
  55.             function addElementWithBuffer(parentSelector, element) {
  56.                 if (!fragmentsBuffer[parentSelector]) {
  57.                     fragmentsBuffer[parentSelector] = {
  58.                         fragment: document.createDocumentFragment(),
  59.                         length: 0
  60.                     };
  61.                 }
  62.  
  63.                 fragmentsBuffer[parentSelector].fragment.appendChild(element);
  64.                 //we dont calculate childNodes every time because
  65.                 //it is slow and that's why there is the length property
  66.                 fragmentsBuffer[parentSelector].length += 1;
  67.  
  68.                 if (fragmentsBuffer[parentSelector].length === 100) {
  69.                     // the fragment has reached the buffer maximum size and appends it
  70.                     // to the DOM tree and after that the buffer is emptied
  71.                     var parent = getElement(parentSelector);
  72.                     parent.appendChild(fragmentsBuffer[parentSelector].fragment);
  73.                     delete fragmentsBuffer[parentSelector];
  74.                     //     fragmentsBuffer[parentSelector] = null;
  75.                     // the same can be done this way but with delete it is more clear
  76.                 }
  77.             }
  78.  
  79.             return {
  80.                 addElement: addElement,
  81.                 removeElements: removeElements,
  82.                 attachEventHandler: attachEventHandler,
  83.                 addElementWithBuffer: addElementWithBuffer
  84.             };
  85.         })();
  86.  
  87.         function eventHandler() {
  88.             alert("Event!");
  89.         }
  90.  
  91.         var divToAdd = document.createElement("div");
  92.         divToAdd.innerText = "Added Div!";
  93.         divToAdd.setAttribute("style", "border: 5px solid red; width:200px; height:200px; font-size: 30px; " +
  94.                 "text-align: center; background-color: yellow; width:300px;");
  95.         DOMUtil.addElement("#main-div", divToAdd);
  96.  
  97.         DOMUtil.attachEventHandler("#main-div", "click", eventHandler);
  98.  
  99.         //demonstrating the buffer append -> wont append elements if they are less than 100
  100.         for (var i = 0; i < 100; i += 1) {
  101.             var divToAdd = document.createElement("div");
  102.             divToAdd.innerText = "buffer-div";
  103.             divToAdd.setAttribute("style", "border: 1px solid blue; width:55px; height:55px; float:left;");
  104.             DOMUtil.addElementWithBuffer("#main-div", divToAdd);
  105.         }
  106.     </script>
  107. </body>
  108. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top