An Introduction to the DOM
DOM is an acronym for Document Object Model. It's a way of looking at HTML that makes it possible for website developers to create functions and manipulate the code in ways that would otherwise be impossible.
There are three basic types of DOM; the core DOM, which can be used to define any document regardless of type; the XML DOM, which is used with XML documents, and the HTML DOM. This last type is the most important and useful for HTML developers, so that's the DOM this article will explore.
The HTML DOM divides an HTML page up into nodes. These nodes are all connected to each other, with child nodes descending from their parent nodes and from the root node at the top, in a tree-like layout. What makes the DOM so important and useful to HTML developers is that this definition makes every part of the page distinct and locates it in relation to all other parts, so that it's easy to design code that refers to that particular section and affects only that portion. This makes the HTML DOM vital for Javascript programming, for example, since it provides a way for a Javascript program to use HTML elements directly. Without the DOM, it's impossible for a Javascript program to dynamically access a web page's contents. As one example, by using DOM methods you could write a program that alters the text inside a particular HTML element if a specific event occurs (say, a visitor clicks a button on the page).
As you already know, an HTML page is composed of different elements like this:
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<p id="sample">This is an example of a basic HTML page.</p>
</body>
</html>
With the DOM, each element (everything between one set of tags, such as <html></html>) is a node. The <html> node is called the root node, and is the most basic; it has two child nodes, the <head> node and the <body> node. In the above example, the <title> node is the child of the <head> node and the <p> node is the child of the <body> node.
A web developer can use and alter the DOM by using certain commands. These commands are divided into properties (which describe a portion of the HTML page) and methods (which do something to that portion of the page).
For specifics on how to use the HTML DOM, see the next article, "Working with the DOM," which will be posted next week.
There are three basic types of DOM; the core DOM, which can be used to define any document regardless of type; the XML DOM, which is used with XML documents, and the HTML DOM. This last type is the most important and useful for HTML developers, so that's the DOM this article will explore.
The HTML DOM divides an HTML page up into nodes. These nodes are all connected to each other, with child nodes descending from their parent nodes and from the root node at the top, in a tree-like layout. What makes the DOM so important and useful to HTML developers is that this definition makes every part of the page distinct and locates it in relation to all other parts, so that it's easy to design code that refers to that particular section and affects only that portion. This makes the HTML DOM vital for Javascript programming, for example, since it provides a way for a Javascript program to use HTML elements directly. Without the DOM, it's impossible for a Javascript program to dynamically access a web page's contents. As one example, by using DOM methods you could write a program that alters the text inside a particular HTML element if a specific event occurs (say, a visitor clicks a button on the page).
As you already know, an HTML page is composed of different elements like this:
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<p id="sample">This is an example of a basic HTML page.</p>
</body>
</html>
With the DOM, each element (everything between one set of tags, such as <html></html>) is a node. The <html> node is called the root node, and is the most basic; it has two child nodes, the <head> node and the <body> node. In the above example, the <title> node is the child of the <head> node and the <p> node is the child of the <body> node.
A web developer can use and alter the DOM by using certain commands. These commands are divided into properties (which describe a portion of the HTML page) and methods (which do something to that portion of the page).
For specifics on how to use the HTML DOM, see the next article, "Working with the DOM," which will be posted next week.
This site needs an editor - click to learn more!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.
