1. The Document Object Model (DOM) is a W3C standard.
Internet Programming Chapter 4: Document Object Model (DOM) and JavaScript Objects
The Document Object Model (DOM) is a W3C standard.
DOM is a platform-independent and language-independent interface that allows programs and scripts to dynamically access and update the content, structure and style of documents.
We can use DOM to map HTML into objects for manipulation by general-purpose scripting languages such as JavaScript.

2. Objects
Underneath everything in JavaScript are objects.
An object is a collection of data types as well as functions in one package
The various data types called properties and functions called methods are accessed using a dot notation. ObjectName.propertyName
We have actually been using these ideas already, for example document.write("hello") says using the document object invoke the write() method and give it the string "hello" this results in output to the string

3. Objects and Methods
Many JavaScript objects have methods, which perform some operation when called.
We write a method call in a script like this: object.method( )
Methods often have arguments - data that is passed to the method, and used by the method in some way.
Examples:
window.alert(message) - display message in pop-up box
window.close() - close the window
document.write(value) - append data to a document
document.writeln(value) - append data + newline to a document

4. JavaScript Objects Objects in JavaScript fall into 2 groups:
1)   User-defined objects
These objects are custom objects created by the programmer to bring structure and consistency to a particular programming task.  
2)   Built-in objects
These objects are provided by the JavaScript language itself.
Include those objects associated with primitive data types (String, Number, and Boolean), objects that allow creation of user-defined objects and composite types (Object and Array), and objects that simplify common tasks, such as Date, Math.

5. DOM in HTML
DOM is an evolving standard that specifies how a scripting language can access and manipulate the detailed structure of an HTML document.
When an HTML page loads into a scriptable browser, the browser creates a hidden, internal roadmap of ALL the elements it recognizes as scriptable objects
The roadmap is a class hierarchy
"Document objects" are scriptable objects in a page that can be addressed and moved around.

6. The DOM has three types of pre-defined objects:
DOM Objects
The DOM has three types of pre-defined objects:
"Utility" objects, such as user-defined objects, String and Math.
Browser interaction objects, such as Window, Document, Location.
Dynamically-built objects which have a one-to-one relationship with major HTML tags, such as <image> or <table>.

7. Browser Interaction Objects
To understand browser interaction objects, you must understand the object containment hierarchy:
The most global (highest-level) object in the DOM is the Window Object.
That, in turn, contains the Document Object that represents the HTML document.
The document, in turn, may contain a Form Object, which in turn contains form elements…

8. DOM Hierarchy
e.g. <area> in image map
<a>

9. Object Hierarchy in HTML

10. The Document Object contains:
Individual properties, such as
the URL of the current document.
title.
background color of the document. …
Properties that are stored as arrays, representing things such as:
forms
images
links
Methods, such as
Writing text to a document as it loads.

11. Tag-Associated Objects Under Document
When a page loads, objects are built dynamically and have a one-to-one relationship with major HTML tags, such as <image>, <table>, <form>, etc.
Attributes from individual HTML tags must be associated with their DOM objects…

12. Referencing an Object using JavaScript
Next, we need to understand the way that JavaScript can access DOM objects...
Remember how in HTML many tags had the NAME attribute?
<input name ="firstName"
type ="text"…>

13. Referencing an Object using JavaScript
We can now use those names to access those objects through the DOM hierarchy.
That is, you have to drill down the path through the DOM hierarchy in order to get to the object, just like you have to list upper-level subdirectories to get to a lower-level subdirectory on a computer disk.

14. Window
Document (HTML file)
window
document
image
form
text field
button
anchor
image
form
text field
text field
button
anchor

15. Referencing an Object using JavaScript
So, if we have the following (incomplete) HTML code:
<body ...>
. . .
<form name = "userInfo" ...>
<input name = "zipCode"
type = "text"
value = "60115">
</form>
<body>

16. Referencing an Object using JavaScript
To access the <form> named userInfo, list each object going down through the hierarchy, separating the various elements with periods:
window.document.userInfo
Document object, contains...
Form object
Window object, contains...

17. Referencing an Object using JavaScript
To access the <input> named zipCode:
window.document.userInfo.zipCode
Window object, contains...
Document object, contains...
Form object, contains...
Form element

18. Referencing an Object using JavaScript
Anyway, the window can usually be omitted:
window.document.userInfo.zipCode
becomes just
document.userInfo.zipCode

19. Referencing an Object using JavaScript
A reference like this gets you to the field, but it won’t get you to the value property, which is the content that the field holds.
<input name = "zipCode"
type = "text"
value = "60115">

20. Referencing an Object using JavaScript
To reference the contents of the text field, specify the value property of that field:
document.userInfo.zipCode.value
This, then, contains the value currently associated with the zipCode input tag.

21. JavaScript Objects
Thus JavaScript organizes all elements on a web-page in a hierarchy.
Every element is seen as an object. Each object can have certain properties and methods.
With the help of JavaScript you can easily manipulate the objects.
It is very important to understand the hierarchy of HTML-objects.
The following code is a simple HTML-page.

22. Example Accessing HTML Elements with Javascript

23. The Example Web Page in HTML
<body bgcolor="#ffffff">
<center>
<img src="home1.gif" id="pic1" name="pic1" />
</center><br />
<form name="myForm">
Name:<input type="text" name="name" id="name" value=""><br/>
<input type="text" name=" ” value=""><br/><br/>
<input type="button" value="Push me"
name="myButton" onClick="alert('Hello');">
</form><br />
<img src="ruler1.gif" name="ruler" width="300" height="15" />
<br /><br />
<a href=" id="anchor">My homepage</a>
</body>

24. Some ways to access the first image:
Accessing the image
Some ways to access the first image:
- document.pic1
- document.images[0]
- document.getElementById("pic1")
Some properties for an image:
- width
- height
- src
- document.pic1.src = "home2.gif";
- document.images[0].height = 10;
- document.getElementById("pic1").width = 20;

25. Accessing the form elements
Some ways to access the textbox:
- document.myForm.name.value = "1";
- document.myForm.elements[0].value="2";
- document.getElementById("name").value="3";
Some ways to access the button:
- document.myForm.myButton.width=300;
- document.myForm.elements[2].height=100;

26. Accessing the hyperlink
Some ways to access the hyperlink (anchor):
- document.links[0].href =
"
- document.getElementById("anchor").innerHTML =
"Yahoo";