This section provides a quick description of the 'document' object of the DOM API. A tutorial example is provided on building a simple HTML document with the 'document' object.
A typical Web browser provides the DOM (Document Object Model) API (Application Programming Interface)
to allow JavaScript codes to interact with the browser and the HTML document.
The most commonly used object in the DOM API is the "document" object, which has the following features:
The "document" object is a browser built-in object that represents the current HTML document in the browser.
The "document" object represents all elements in the HTML document with tree structure of "node" objects.
The "document" object and its "node" objects offer various methods to allow you to manipulate the HTML document.
The "document" object share the same programming interface in JavaScript and other programming languages.
To illustrate some nice features of the "document" object, I wrote this JavaScript tutorial example:
<html>
<!-- Document_Object.html
Copyright (c) 2008 by Dr. Herong Yang, http://www.herongyang.com/
-->
<head>
<title>Document Object</title>
<script type="text/javascript">
function buildDocument() {
// Building a <p> tag
var paragraph = document.createElement("p");
var text = document.createTextNode("Hello World!");
paragraph.appendChild(text);
// Inserting the <p> tag
document.body.appendChild(paragraph);
document.body.bgColor = "lightblue";
}
</script>
</head>
<body onLoad="buildDocument();"/>
</html>
If you run this JavaScript page in a browser, you will see the "Hello World!" paragraph with light blue background.
For more tutorial examples on the "document" object, see the DOM API chapters in this book.
