title: How to monitor a webpage for changes using Javascript?
body: <p>I've searched for this a lot and for a long time, all I can find is online websites that will monitor websites for you but mostly require money to scan in short intervals. There might be software or browser extensions out there that also claim to do the job but I didn't have any success with them.</p>
  
  <p>Since I'm learning JS, I thought there might be some way to do this myself.</p>
  
  <p>Here's what I've thought of, comparing document.body before and after a change. So using Developer's Tools Console (F12), I tried this:</p>
  
  <pre><code>x=document.body
      &lt;body style=​"background-color:​ rgb(21, 32, 43)​;​"&gt;​…​&lt;/body&gt;​
  r=document.createElement("p")
      &lt;p&gt;​&lt;/p&gt;​
  r.innerHTML="hi"
      "hi"
  document.body.appendChild(r)
      &lt;p&gt;hi​&lt;/p&gt;​
  y=document.body
      &lt;body style=​"background-color:​ rgb(21, 32, 43)​;​"&gt;​…​&lt;/body&gt;​
  x==y
      true
  </code></pre>
  
  <p>I don't understand why it reports "true", it should report false.</p>
  
  <p>Why?</p>
  
  <p>Any recommendation on how to get this done is very well appreciated.</p>
  
  <hr>
  
  <p>new observation:</p>
  
  <p>If <code>x=document.body</code> </p>
  
  <p>then add a new <code>&lt;p&gt;&lt;/p&gt;</code> to <code>body</code></p>
  
  <p>and I do <code>x=x.innerHTML</code></p>
  
  <p>then do <code>y=document.body.innerHTML</code></p>
  
  <p><code>x==y</code> will report true. (WHY?!)</p>
  
  <p>BUT:</p>
  
  <p>If <code>x=document.body</code> and I do <code>x=x.innerHTML</code></p>
  
  <p>then add a new <code>&lt;p&gt;&lt;/p&gt;</code> to <code>body</code></p>
  
  <p>then do <code>y=document.body.innerHTML</code></p>
  
  <p><code>x==y</code> will report false.</p>