The Document Object Model is a language-agnostic model for representing structured documents built in HTML, XML, or similar standards. You can think of it as a tree of nodes that closely resembles the document parsed by the browser.
At the top, there is an implicit document node, which represents the <html> tag; browsers create this tag even if you don't specify it and then build the tree off this root node according to what your document looks like. If you have a simple HTML file as follows:
<!DOCTYPE html> <title>A title</title> <div> <p>A paragraph of text</p> </div> <ul> <li>List item</li> <li>List item 2, <em><strong>italic</strong></em></li> </ul>
Chrome will parse the preceding code to DOM as follows:
In the latest Chrome builds, I can print and play with this in the Console tab; you might have to use the Elements tab to get the same effect. Moving the cursor over each...