The DOM is a different representation of the HTML in the browser. In the DOM you can see the various objects on a page and how they relate to each other in a tree structure. The DOM can be viewed and manipulated using the javascript console in your browser. Every browser has a console, so don't worry about having to install yet another program on your computer.
When you inspect your document in a browser and look at the elements you might wonder what the difference between ordinary HTML actually is. Although it looks the same there are many differences. Your HTML document is actually being sliced into many pieces (objects) and each of these pieces have methods and properties added to them. This way the DOM is able to show us more information on any of these sliced pieces, and allows us to navigate through and interact with them.
Open the javascript console in your browser
Type console.log(document) in the javascript console and press enter
Click on the triangle to unfold the document object and on some further triangles. This will show something very similar to the HTML structure.
Get to know how to navigate the tree a bit
Type console.dir(document) and have a look at that. Do not worry about all the methods and properties in there too much.
Codeschool: The DOM viewed trough the Dev Tools
Remember the HTML tags? The DOM divides these into even smaller pieces called nodes. A node is a point connected to other nodes to create a network. That way a tag becomes a combination of different types of nodes. There are various types of nodes that all refer to their most basic purpose: text nodes, element nodes or attribute nodes. You will often use them as an entry point to interact with your document.
Try to find each of the node types inside console.dir(document)
Mozilla Developer Network: DOM Nodes
All nodes in the DOM have a relation to each other. This can be visualised in a tree structure and be spoken about in terms of family relations. A node that has another node inside of it has a parent/child relationship to it. There can also be multiple nodes on the same level of nesting. These would be called siblings to each other. To be able to distinguish these relations with a quick glance, HTML (and other types) are indented based on the level of nesting.
Try to fix the indentation in the gist below
Navigate the document object keeping these terms in mind to see their implementation.
W3schools: Explanation focussed on the tree structure
Github Gists: Tree Structure Task
Check task: Live DOM Tree viewer
The most important reason to get the know the DOM is because it enables CSS or Javascript to interact with it. Often this interaction will take place trough classes or ids. Both of the languages however also allow you to traverse the DOM with by node relations. The allows you to write cleaner code. An example of CSS selector that uses these relations is ::first-child.
Must be build: Relational Selectors
Mozilla Developer Network: Pseudo-classes
Another way of describing the DOM is that it is a programming interface or API to your document. It allows you to get specific information out of your document or allows you to change it. In the previous task styling was attached to elements with CSS, but the HTML structure did not change. Javascript however can do this.
Go to the page of the first task on the Mozilla Developer Network
Open your DevTools, type in the following command: document.getElementById("main-header").innerHTML = "Hello World"
Try moving your newly introduced phrase to another place on the page
Wellesley: Process oriented explanation of the DOM
Eloquent Javascript on DOM: Javascript oriented explanation of the DOM