title: Wrapping a DOM element inside a JavaScript object
body: <p>I've noticed a common pattern in the JavaScript I've been writing and was wondering if there is already a pattern out there that defines something similar as best practice? Essentially, it's how to get a DOM element and wrap it inside / associate it with a JavaScript object. Take this example, where you need a filter in your web app. Your page looks like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div id="filter"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You'd then wrap the element like so:</p>
  
  <pre><code>var myFilter = new Filter({
      elem: document.getElementById('filter'),
      prop: 'stacks-test',
      someCallback: function() {
          // specify a callback
      }
  });
  </code></pre>
  
  <p>And the JavaScript (where spec is an object passed to the constructor):</p>
  
  <pre><code>var Filter = function(spec) {
      this.elem = spec.elem;
      this.prop = spec.prop;
      this.callback = spec.someCallback;
      this.bindEvents();
  };
  
  Filter.prototype.bindEvents = function() {
      var self = this;
      $(this.elem).click(function(e) {
          self.updateFeed();
      };
  };
  
  Filter.prototype.updateFeed = function() {
      this.prop; // 'stacks-test'
      this.callback();
      // ...
      // code to interact with other JavaScript objects
      // who in turn, update the document
  };
  </code></pre>
  
  <p>What is this kind of approach called, and what are the best practices and caveats?</p>