braindump of Cody Lindley, one of the original jQuery team members, on the DOM at HTML5.tx

The DOM is the Document Object Model. A 2002 book on the DOM is the only book that exists. The mess is not as messy as the mess once was. Going into the history of Browser Wars and 1997 Netscape vs. Microsoft. After 2002 in the absence of the war a process of standardization set in. Fast forward a decade. Vendors of browsers are in a friendly competition around how fast they can standardize. Modern DOM is IE9+. The DOM is a specification for describing how an HTML blob can be parsed into a structured tree of JavaScript nodes.  In IE's Developer's Tools, one may click on a node and then look at "properties" to see where documents and properties come from. Use: keys(Node) in the developer tools console to see all the nodes. vales(Node) brings back a comparable list of values. What is the first node in the DOM tree? It is the document itself. document.firstChild is going to give you the HTML tag. document.implementation.createHTMLDocument() creates a document programmatically. In the Developer Tools console there is some dot syntax for autocomplete that helps you figure out the documentation for the DOM in the absence of books to read. Type document. and then see what autocompletes. Element nodes are the nodes in the DOM tree beneath the document. document.body.ownerDocument will take you back to the document node as "#document" ...document.body.tagName does what you might expect. document.body.attributes gives a list of attributes. document.body.classlist does what you'd suspect. document.body.dataset gets details for the body... document.body.dataset.myOwnAttr is going to fish for the value of myOwnAttr. Text nodes sit between element nodes. They are blobs of text. "Contents" is the only method in jQuery to work with text strings. jQuery is about "find something, do something" and $('a') for example finds all the anchor tags. document.querySelectorsAll('a') does something comparable. There are a bunch of preselected lists in the DOM too. document.scripts is a preconfigured list of all script tags. He's now out of time and quickly going through the last slides. There are jQuery methods that will have DOM equivalents in DOM4.