TLDR: the browser parses an html file, creates the DOM, and stores the DOM in memory.
My blog post this week deals with the Document Object Model (DOM). If you are not familiar with this concept, Mozilla has a great explainer here.
At Flatiron, we've discussed what the DOM is, why it's important, and how to access it. However, we haven't addressed where the DOM is stored, or how it gets there. For some reason I found this topic especially interesting this week. This blog post is about my journey exploring this topic.
Down the Rabbit Hole -
After opening the browser, Tony launches chrome's dev console and enters the word
window. Somehow, the console returned a
window property that contained hundreds of key/value pairs. Entering
document in the console for a blank site similarly yields some kind of pre-defined property.
According to MDN, "the
window interface represents a window containing a DOM document; the
document property points to the DOM document loaded in that window."
Loaded From Where?
As MDN explains above, the browser "loads" the
document into the window. But where is the DOM? How does
document know where to look?
After some googling I landed on this answer from React Kung Fu:
"So, while HTML is a text, the DOM is an in-memory representation of this text."
In other words, the browser stores the DOM in RAM. My next question was how?
The Rendering Engine - How HTML Gets Transformed Into the DOM
Here's an excerpt from a post on medium that answers how the DOM gets loaded into memory:
The browser's rendering engine receives the contents of the requested document from the networking layer. The first step of the rendering engine is parsing the HTML document and converting the parsed elements to actual DOM nodes in a DOM tree.
This process can be broken down further into "conversion," "tokenizing", "lexing", and DOM "construction." See this article by Google Web for more info.
Unlike Chrome, Node.js does not run in the browser. It didn't make sense to me to have a DOM without a browser, but I wanted to confirm. I started Node.js by entering
node in my terminal, and then I entered
document. As I expected, the terminal returned
ReferenceError: document is not defined.
I hope you enjoyed reading this post!