title: reference a DOM element as a property of the window object
body: <p>According to <a href="http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/" rel="nofollow">this blog post</a> it is possible to reference DOM elements as named properties of the <code>window</code> object (based on their <code>name</code> attribute). The above code shows that indeed the form can be accessed as <code>window.aform</code>. Yet why does it fail to find the property when iterating over all properties of <code>window</code>?</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;form name='aform'&gt;
      &lt;/form&gt;
      &lt;script&gt;
       // get all properties, including non-enumerable ones: http://stackoverflow.com/a/8024294/274677
       function getAllProperties(obj){
         var allProps = [], curr = obj;
         do {
           var props = Object.getOwnPropertyNames(curr)
             props.forEach(function(prop){
               if (allProps.indexOf(prop) === -1)
                 allProps.push(prop)
             })
         } while(curr = Object.getPrototypeOf(curr))
           return allProps
       }
       var findIn = function(x,y) {
         var ps = getAllProperties(x);
         for (var i = 0 ; i &lt; ps.length; i++) {
           var propertyName = ps[i];
           try {
             if (x[propertyName]===y)
               return 'found as property ['+propertyName+']';
           } catch (e) {
             console.log('failed to read property ['+propertyName+'] due to: ['+e.name+']');
           }
         }
         return "not found";
       }
       console.log(findIn(window, window.aform));
       console.log(window['aform']===window.aform);
       console.log(window.aform);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the above page loads, I see on the console:</p>
  
  <pre><code>not found
  true
  &lt;form name="aform"&gt;&lt;/form&gt;
  </code></pre>