Chapter: Web Technology : Host Objects

Introduction to the Document Object Model

The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself.

INTRODUCTION TO THE DOCUMENT OBJECT MODEL

The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself.

By calling the element by its proper DOM name, we can influence it. The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document).

It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects.

It also provides methods for adding and removing such objects, allowing you to create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. This feature is briefly covered here but the details are saved for another article.

For this one, the discussion will be on the DOM representation of a document and the methods it provides to access those objects.

Nodes

The DOM is a Document Object Model, a model of how the various objects of a document are related to each other. In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do

<P>This is a paragraph</P>

you have created two nodes: an element P and a text node with content 'This is a paragraph'. The text node is inside the element, so it is considered a child node of the element. Conversely, the element is considered the parent node of the text node.

The 2 traditional ways of assigning event handlers

1) Via HTML, using attributes

2) Via scripting

Change the Text of an HTML Element - innerHTML

The easiest way to get or modify the content of an element is by using the innerHTML property.

The following example changes the text of a <p> element:

Example

<html>

<body>

<p id="p1">Hello World!</p> <script type="text/javascript">

document.getElementById("p1").innerHTML="New text!"; </script>

</body>

</html>

Change an HTML Element Using Events

An event handler allows you to execute code when an event occurs.Events are generated by the browser when the user clicks an element, when the page loads, when a form is submitted, etc. The following example changes the background color of the <body> element when a button is clicked:

Example

<html>

<body>

</body>

</html>

Change the Text of an Element - with a Function

The following example uses a function to change the text of the <p> element when a button is clicked:

Example

<html>

<head>

<script

type="text/javascript"> function ChangeText()

{

document.getElementById("p1").innerHTML="New text!";

}

</script>

</head>

<body>

<p id="p1">Hello world!</p>

</html>

Using the Style Object

The Style object of each HTML element represents its individual style.

The following example uses a function to change the style of the <body> element when a button is clicked:

Example

<html>

<head>

<script

type="text/javascript"> function ChangeBackground()

{

document.body.style.backgroundColor="lavender";

}

</script>

</head>

<body>

</body>

</html>

Change the font and color of an Element

The following example uses a function to change the style of the <p> element when a button is clicked:

Example

<html>

<head>

<script

type="text/javascript"> function ChangeStyle()

{

document.getElementById("p1").style.color="blue"; document.getElementById("p1").style.fontFamily="A rial";

}

</script>

</head>

<body>

<p id="p1">Hello world!</p>

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Web Technology : Host Objects : Introduction to the Document Object Model |