title: Wrapping DOM element or using a utility class
body: <p>I am working on a custom js library for creating UI components and I would like to know (and understand) the repercussions of the following two approaches:</p>
  
  <p>(the code below is just to show the concept)</p>
  
  <p>First approach is by encapsulating the element:</p>
  
  <pre><code>function wrapElement(id) {
      var el = document.getElementById(id);
      return {
          el:el,
          hide:function() {
            // set el.style.display to 'none'
          },
          show:function() {
             // set el.style.display to ''
          },
          getSize:function() {
             // get the size of the el
          }   
      }
  }
  
  var myEl = wrapElement('abc');
  myEl.hide();
  </code></pre>
  
  <p>The second approach is to manipulate the element by a utility class:</p>
  
  <pre><code>var ElementUtil = {
      get:function(id) {
          return document.getElementById(id);
      },
      hide:function(el) {
          // set the el.style.display to 'none'
      },
      show:function(el) {
          // set the el.style.display to ''
      },
      getSize:function(el) {
          // get the size of the el
      }
  }
  
  var myEl = ElementUtil.get('abc');
  ElementUtil.hide(myEl);
  </code></pre>
  
  <p>Which one of the above is better if we take the memory consumption and performance into account?</p>
  
  <p>(Please note: I don't want to use a pre existing library like jQuery and such)</p>
  
  <p>Any advice or directions is greatly appreciated.</p>