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>
<input
type="button" onclick="document.body.bgColor='lavender';"
value="Change background color" />
</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>
<input
type="button" onclick="ChangeText()" value="Change
text" /> </body>
</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>
<input
type="button" onclick="ChangeBackground()"
value="Change background color" />
</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>
<input
type="button" onclick="ChangeStyle()" value="Change
style" />
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.