8.2. Is My DOM Ready Yet?

In the previous chapter, we learned that the HTML source is parsed sequentially to create the DOM tree. The browser goes through the HTML source and "interprets" each of the tags it encounters, creating new nodes and elements for the DOM tree. We also learned that <script> tags are executed sequentially by the browser. When the browser encounters a <script> tag, it executes the code contained between the tags before moving on to parse the next tag in the HTML source. In the case of external scripts, the browser downloads the external code first and then executes it, and only after that will the parsing start again.

This sequential parsing of the DOM, together with the blocking nature of script execution, presents a gotcha when it comes to DOM scripting. To truly understand this issue, let's suppose we're browsers trying to parse the following HTML source sequentially: