The Dom (Document Object Model)
This is a great short video on the DOM
When you request a website, the browser receives a stream of HTML. The HTML then goes through a parsing process that determines the different characters.
"the DOM is the full, parsed representation of the HTML"
For example the start tag character `<`, an attribute like href, a closing angle bracket like `>`. Once the parsing process has finished, a new process begins called tokenization. Tokenization takes one character at a time and builds up tokens.
At this point the browser has received HTML from a server. The browser then takes the HTML tags from the HTMl and through a process called tokenization converts them to tokens. This entire process is done by the tokenizer.
"The DOM is a tree-like structure that is a representation of the HTML document"
The tokens then goes through the tree construction stage. The output of this stage is a tree-like structure, this is the DOM.
A great intro into the DOM at Udemy.
Try it out:
- Open Dev tools
- Open the console tab
- Type out the word
- Press enter
Check out more about the DOM at Wikipedia
The history of the Document Object Model is intertwined with the history of the "browser wars" of the late 1990s.
The DOM Recap
So to recap, The DOM stands for "Document Object Model" and is a tree-like structure that is a representation of the HTML document, the relationship between elements, and contains the content and properties of the elements.
Next week we will go over selecting Page Elements by ID, Class and Tag.