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.
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
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