|
|
The HTML DOM
Posted On May 9, 2007 by Madhu AP filed under Internet
HTML Document Object Model is an API that allows programming languages and scripts to directly access, update, manipulate and use HTML resources. It is a neutral model, and can be implemented in any language. Using HTML DOM you can program the web pages easily.
That is the definition! Now look at any web page. You will see a definite pattern to each. You will see text, images, flash, tables, animations etc. If you look at the source of a web page you will understand that there is a model in which each HTML page is construed.
Take for example a simple HTML page such as given below.
<html>
<body>
<h1> Hello World! </h1>
</body>
</html>
Take a careful look at the tags. Each tag is included in another tag. Now it is easy to construct a tree like model. The top node of the tree is the html, and then you have body, then h1.
DOM model follows the same principle. It implements an HTML page as a tree like structure with the topmost element (or tag) forming a parent node to other nodes which will be regarded as child nodes or child elements.
You need to visualize it like a tree. The root of the tree is a document element. The document element signifies the physical document. Then you have the HTML element. Then it is followed by other elements each forming a node, if it has other elements inside.
An element containing another element is a parent element and the element inside the other element is a child element. Similarly elements can have attributes.
Objects
Then there exists the concept of an HTML DOM object which will be defined between two tags. And you can access properties and methods of these objects. In fact most of the programming work you will be doing using JavaScript will be by manipulating these objects.