The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a tree of objects which are the Document Object Model of the page. Every part of the page is represented by an object in the model. Every object shows the properties of that part of the page, and each part of the page can be modified by manipulating the objects attributes.

NOTE : The following topics are a very condensed paraphrasing of various documentation provided by Microsoft and Netscape for the very early versions of JavaScript. Highly detailed and complete documentation of current versions of JavaScript are available from the Mozilla Deveopers site (e.g. Introduction to the DOM^) or sites like W3Schools.com (e.g. JavaScript HTML DOM^ )

The following topics are basically an object quick reference and should not be treated as any kind of replacement for the actual documentation. The only value in capturing this early documentation is that all future development must be backwards compatible to the original. Some of the original items should no longer be used, and have been replaced with better ways of doing things, but they generally all still work.

For scripting purposes, practically every part of the browser and HTML document can be treated as a discrete object that has several properties and methods that can be accessed and invoked respectively. The hierarchy is as follows :

Window

• Screen
• Event
• Navigator
• Selection
  • TextRange
• History
• Location

Document

• All
• Links
• Images
• Forms
  • Elements
    • <SELECT>
      • Options
• Anchors
• Applets
• Embeds
• StyleSheets / StyleSheet Object
• Scripts

Style

Map

• Areas

Table

• Rows
  • Cells
    

Old: Imports, Layers, Frames, Filters, Layer, Plugins

This video explains the DOM pretty well:

© 1995-1998, Stephen Le Hunte

See also:

• https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model
• https://www.udacity.com/course/javascript-and-the-dom--ud117 A free 4 week course+
• http://www.webreference.com/programming/javascript/mk/column2/ How to drag and drop in JavaScript+
• http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ Loading scripts without blocking.

https://github.com/coodict/javascript-in-one-pic JavaScript in one picture: (click to zoom in)

  .