title: Override existing HTML Element attribute and property with Javascript
body: <p>I was wondering if its possible to override existing HTML Element attribute and property accessors (getters and setters) with Javascript so that when html is rendered by browser all the assignments to certain attributes in the html code are preprocessed with custom functionality.</p>
  
  <p>Here is an example :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  // JS code would go here which would override default behavior 
  // for example if I wanted to reformat id="name"  so its actually
  // registered as id="pre_name" once browser renders the html  
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- here we are assigning the 'name' to id , but behind the scene we really want it to be 'pre_name' --&gt;
  &lt;div id="name"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      // when we try to access the id it would actually match the overwritten one 
      console.log(document.body.children[0].id)  // would output pre_name
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is something like that possible and how?
  I know that I can traverse the dom after it's rendered and change all of the ids, but I am wondering if its possible to intercept the assignment of properties and attributes and do it at that level before browser even renders the html.</p>
  
  <p>Example I presented is just made up one to present the problem and make is simple to understand. </p>
  
  <p>Thanks</p>