logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

An Introduction to the DOM

Guest Author - Elizabeth Connick

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.
This site needs an editor - click to learn more!

Add An+Introduction+to+the+DOM to Twitter Add An+Introduction+to+the+DOM to Facebook Add An+Introduction+to+the+DOM to MySpace Add An+Introduction+to+the+DOM to Del.icio.us Digg An+Introduction+to+the+DOM Add An+Introduction+to+the+DOM to Yahoo My Web Add An+Introduction+to+the+DOM to Google Bookmarks Add An+Introduction+to+the+DOM to Stumbleupon Add An+Introduction+to+the+DOM to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor