Executed In Sequence of Page Load

I was researching some javascript capabilities earlier and from a wikipedia article on Comet learned this

“browsers render HTML pages incrementally, each script tag is executed as it is received.

Awesome!  This means not just that you can execute javascript before and as the page is loading, but you choose WHEN/WHERE to run it.  To test it out I made the following example.

<html>
<body>
  <div>Original</div>
  <div>Original</div>
  <script>
    var link, links;
    links = document.getElementsByTagName( 'div' );
    for (l in links) { links[l].innerHTML = 'Edited'; }
  </script>
  <div>Original</div>
</body>
</html>

The inserted script collects all ‘div’ elements in the document and changes them to instead say “Edited”.  The code outputs the following result.

Edited
Edited
Original

Because the script is executed in the order that the page is loaded, the first two divs get edited, but the last one which didn’t exist at the time the script was run, was not edited.  Some clever things can be done with this.  I’ll blog more about it later.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s