|
The HTML Document Object Model (HTML DOM)
defines a standard way for accessing and manipulating HTML
documents.
What You Should Already Know
Before you continue you should have a basic understanding of
the following:
If you want to study these subjects first, find the tutorials
on our Home page.
What is the DOM?
"The W3C Document Object Model (DOM) is a platform and
language neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style
of a document."
The W3C DOM provides a standard set of objects for
representing HTML and XML documents, and a standard interface
for accessing and manipulating them.
The DOM is separated into different parts (Core, XML, and
HTML) and different levels (DOM Level 1/2/3):
- Core DOM - defines a standard set of objects for any
structured document
- XML DOM - defines a standard set of objects for XML
documents
- HTML DOM - defines a standard set of objects for HTML
documents
You can read more about the W3C DOM specifications / levels
in our W3C tutorial.
What is the HTML DOM?
- The HTML DOM is the Document Object Model for HTML
- The HTML DOM is platform and language independent
- The HTML DOM defines a standard set of objects for HTML,
and a standard way to access and manipulate HTML documents
- The HTML DOM is a W3C standard
The HTML DOM views HTML documents as a tree structure of
elements embedded within other elements. All elements, their
containing text and their attributes, can be accessed through
the DOM tree. Their contents can be modified or deleted, and new
elements can be created by the DOM. The elements, their text,
and their attributes are all known as nodes.
We Will Use JavaScript
The HTML DOM is platform and language independent. It can be
used by any programming language like Java, JavaScript, and
VBScript.
In this tutorial we will use JavaScript.
An HTML DOM Example
This coding example shows how the background color of an HTML
document can be changed to yellow when a user clicks on it:
<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
|
The example above is explained in details in the next chapter
of this tutorial. |
