sashomaga

DOM manipulation

Apr 24th, 2013
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. Create a module for working to work with DOM. The module should have the following functionality
  3.  
  4.     Add element to parent element by given selector
  5.     Remove element from the DOM  by given selector
  6.     Attach event to given selector by given event type and event hander
  7.     Add elements to buffer, which appends them to the DOM when their for some selector count becomes 100
  8.     The buffer contains elements for each selector it gets
  9.     Get elements by CSS selector
  10.     The module should reveal only the methods */
  11.  
  12. 'use strict';
  13.  
  14. var domModul = (function () {
  15.     // Fields
  16.     var _parentNode;
  17.     var _currentNode;
  18.     var _childNode;
  19.     var _childNodeSet;
  20.     var _buffer = [];
  21.  
  22.     // Private functions
  23.     function getElement(selector) {
  24.         return document.querySelector(selector);
  25.     }
  26.     function getElementsAll(selector) {
  27.         return document.querySelectorAll(selector);
  28.     }
  29.  
  30.     // Public functions
  31.     return {
  32.         appendChild: function (element, selector) {            
  33.             _parentNode = getElement(selector);            
  34.             _parentNode.appendChild(element);
  35.         },
  36.         removeChild: function (parentSelector,childSelector) {
  37.             _parentNode = getElement(parentSelector);
  38.             _childNode = _parentNode.querySelector(parentSelector + ">" + childSelector);
  39.             _parentNode.removeChild(_childNode);
  40.         },
  41.         removeAllChild: function (parentSelector, childSelector) {
  42.             _parentNode = getElement(parentSelector);
  43.             _childNodeSet = document.querySelectorAll(parentSelector + ">" + childSelector);
  44.             for (var i = 0; i < _childNodeSet.length; i++) {
  45.                 if (_childNodeSet[i].nodeType === 1) {
  46.                     _childNodeSet[i].parentNode.removeChild(_childNodeSet[i]);
  47.                 }
  48.             }
  49.         },
  50.         attachEvent: function (elementSelector, eventType, eventHandler) {
  51.             _currentNode = getElement(elementSelector);
  52.             _currentNode.addEventListener(eventType, eventHandler);
  53.         },
  54.         addToBuffer: function (parentSelector, element) {
  55.             if (_buffer[parentSelector] === undefined) {
  56.                 _buffer[parentSelector] = document.createDocumentFragment();
  57.                 _buffer[parentSelector].appendChild(element);
  58.             } else {
  59.                 _buffer[parentSelector].appendChild(element);                
  60.                 if (_buffer[parentSelector].childNodes.length >= 100) {
  61.                     _parentNode = getElement(parentSelector);
  62.                     _parentNode.appendChild(_buffer[parentSelector]);
  63.                 }
  64.             }          
  65.         },
  66.         cssSelector: function (selector) {
  67.             return getElement(selector);
  68.         },
  69.         cssSelectorAll: function (selector) {
  70.             return getElementsAll(selector);
  71.         }
  72.     };
  73. }());
Advertisement
Add Comment
Please, Sign In to add comment