title: Freezing the DOM to JavaScript: Overwriting DOM modification functions as no-ops
body: <p>I'm writing a piece of code that requires the <code>DOM</code> of a website to remain frozen while arbitrary JavaScript runs. Attributes changing is fine but I can't have anything changing the original tag structure of the page!</p>
  
  <p>I know in JavaScript there are a base number of functions that can modify the <code>DOM</code>:</p>
  
  <pre><code>appendChild( nodeToAppend )
  cloneNode( true|false )
  createElement( tagName )
  createElemeentNS( namespace, tagName )
  createTextNode( textString )
  innerHTML
  insertBefore( nodeToInsert, nodeToInsertBefore )
  removeChild( nodetoRemove )
  replacechild( nodeToInsert, nodeToReplace )
  </code></pre>
  
  <p>My initial thought was simply to overwrite these functions as no ops:</p>
  
  <pre><code>&gt;&gt;&gt; document.write('&lt;p&gt;Changing your DOM. Mwwhaha!&lt;/p&gt;')
  &gt;&gt;&gt; document.write = function() {}
  &gt;&gt;&gt; document.write('&lt;p&gt;No-op now!&lt;/p&gt;')
  </code></pre>
  
  <p>While it's easy to do this for the <code>document</code> object the <code>DOM</code> modification functions can be called from many different JavaScript objects! If I could overwrite these functions at top level perhaps it would work?</p>
  
  <p>Update from sktrdie:</p>
  
  <pre><code>&gt;&gt;&gt; HTMLElement.prototype.appendChild = function(){}
  &gt;&gt;&gt; $("a").get(0).appendChild(document.createElement("div"))
  # Still works argh.
  &gt;&gt;&gt; HTMLAnchorElement.prototype.appendChild = function(){}
  &gt;&gt;&gt; $("a").get(0).appendChild(document.createElement("div"))
  # No-op yeah!
  </code></pre>
  
  <p>So it would seem I could just gather the constructors of all <code>DOM</code> elements and run over them putting in no-ops but that still seems pretty messy ... </p>
  
  <p><strong>How can I protect the <code>DOM</code> from modification from arbitrary JavaScript?</strong></p>