The Document Object Model (DOM) 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. Consider a simple HTML file to be like the following:
<!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>
Note how we don't have the <html>, <head> or <body> tags. Chrome will parse the preceding code to DOM, as follows:
Type document into the Chrome JavaScript console to get this tree view...
