1.1 The DOM
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document (*wikipedia)
The DOM is also the API that gives languages like JavaScript and CSS a way to define and modify the existing document.
Every element in the DOM, including the text and attributes are considered nodes. Nodes are all related as parents, children, siblings, etc. Everything on the page is a node.
When you access the DOM using Javascript you are accessing nodes.
1.2 Developer Tools
On a Mac, in Google Chrome, access developer tools with Cmd+Option+I.
On a Mac, you can navigate through the different tabs in Developer Tools by holding down the Cmd key and using the bracket keys. The right bracket navigates through the tabs to the right, and the left bracket navigates to the left.
The Element tab and the Console are the two most useful tabs to begin with.
You can go to the console directly with Cmd+Option+J.
1.2.1 The Elements Tab
The Elements tab shows you a visual representation of the DOM on the left. On the right of the tab you can modify the styles of the document.
The breadcrumbs at the bottom of the tab show where you are in the DOM. You can click on the breadcrumb trail to inspect to that element.
You can edit the markup of a document by selecting a line and then hitting Enter or Return.
You can go into regular HTML editing mode by hitting the fn + F2 key on your keyboard.
You can right-click on any element on the page and select Inspect Element, it takes you directly to that element in the DOM.
1.2.2 Inspect Element States
Right click on an element to see a list of states (:hover, etc.) You can use these to inspect the elements behavior for a given state.
1.2.3 Copy xPath
Right click on an element to Copy XPath and that gives you a copy of the path to this element.
1.2.4 Find an element
You can hit Cmd + F, and choose to find an element just by typing it in.