Introduction toDocument Object Model

By: Daniel Bragais

DHTML simply means dynamic HTML.

Dynamic =  changes each time it is viewed, constantly changing. Like a flowing river.

It is not a language, in the sense HTML is a Language that creates Web pages or that JavaScript create codes that add interactivity to HTML documents.

Instead, DHTML is a collection of technologies that supports HTML and extends the interactive capabilities of browsers.

Remember that HTML is a Static and is mainly a language for Structuring and presenting Web page content. Web pages only acquire interactivity when JavaScript codes are introduced, for example

• Some of the most commonly used technologies include

JavaScript CSS Document Object

Model(DOM) XHTML.

Therefore, DHTML does the following:

Works with JavaScript Works with Data Object Model

(DOM) Works with CSS Combines HTML with JavaScript

Document Object Model

Provides a way to TREAT individual

elements in

HTMLas objects.

You can also think of DOM as a map of your HTML document, with each element acting as a marker. Once that marker is set into place, it becomes easy for JavaScript to work on this marker, communicate with it, and get feedback from it.

HTML DOM Tree

Since HTML provides structures for element in your Webpage. DOM also recognizes the structure of an HTML document. As HTML elements may be placed within other elements, DOM reads the HTML structure as a map. It sees the map as composed of sections, and within each section are subsections and their elements.

How to Set Up a Document Object

Consider each element in your HTML as an Object. DOM reads each HTML element as a unique object and as a node within your structure. However, to set an element as a document you must give it its unique identity by using ID attribute. This can be done This Ways:

IDs are mainly used in HTML for layout purposes and to identify the unique elements in your HTML code. Because it is a unique identifier, each ID can be used only once in the page in defining specific elements.

id Specifies a unique id for the

element. Naming rules: Must contain at least one character

Must not contain any space characters

In HTML, all values are case-insensitive

Syntax <element id="id">

Definition and Usage The getElementById() method

accesses the first element with the specified id.

Syntax document.getElementById("id")

javascript document.getelementbyid

If you want to quickly access the value of an HTML input give it an id to make your life a lot easier. This small script below will check to see if there is any text in the text field "myText". The argument that getElementById requires is the id of the HTML element you wish to utilize.

JavaScript Code:

<script type="text/javascript"> function notEmpty(){ var myTextField = document.getElementById('myText'); if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") } </script> <input type='text' id='myText' /> <input type='button' onclick='notEmpty()' value='Form Checker' />

document.getElementById returned a reference to our HTML element myText. We stored this reference into a variable, myTextField, and then used the valueproperty that all input elements have to use to grab the value the user enters.

There are other ways to accomplish what the above script does, but this is definitely a straight-forward and browser-compatible approach.

Thank you!!!

dan_brgs87@yahoo.com

www.codecademy.com/groups/danlikedojo/invite/7e343de793e7752aabb734dc624eb319