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.

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

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

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.

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.

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

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…

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

Object Hierarchy in HTML

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.

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…

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"…>

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.

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

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>

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

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

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

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

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.

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.

Example Accessing HTML Elements with Javascript

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/> e-Mail:<input type="text" name="email” 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="http://www.vtc.edu.hk/" id="anchor">My homepage</a> </body>

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;

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;

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