title: Is there any DOM event that occurs when a page completes its change?
body: <p>I'd like to do things like this;</p>
  
  <pre><code>elem1 = document.getElementById(id1);
  elem1.click()
  // The page has been changed
  elem2 = document.getElementById(id2);
  elem2.click()
  </code></pre>
  
  <p>My problem is, if the second 'getElementById(id2)' is called before the HTML of document.documentElement completes its change, it sometimes fails to get elem2 because there is no HTML element that has id2. (Every javascript sentence in the above code is sent from 3rd party like Selenium Server, and there is a javascript loop that gets the sentence and runs it one by one. You can think the loop as a thing like Selenium Core)  </p>
  
  <p>I'm trying to write a tool like Selenium or Watir. So I can't use those tools. I think Selenium or Watir has a way to send the second command after it waits until the page has been completely changed as the result of the first command. I tried events like window.onwebkittransitionend because I'm trying this on Webkit, but it did not work.</p>
  
  <p>I don't think promise or async can solve this problem, because it needs more than enforcing sequences. It needs to verify if the second page is fully loaded, because the second command can be the others like fetching the information of rendered images rather than just click.</p>
  
  <p>Is there any event or a way to check if page change is completed? Oh, and I can't use jQuery unfortunately. I need to do it with plain Javascript.</p>
  
  <p>Thanks for reading my question.</p>