Complete guide to DOM( Document Object Model)

The Document Object Model is like an organizer for the web developer. When a web page first loads, the browser interprets everything as strings and outputs it to the user. Very convenient for the browser, but how will this help the everyday web developer? The Document Object Model parses the web page and separates everything from a link to an ordered list.  So the <li> tag will be an object.



Within this model, each element in the HTML document becomes an object, as do
all the attributes and text. JavaScript can access each of these objects independently,
using built-in functions that make it easy to find and change what we want on the
fly.




As a result of the way in which HTML is written—as a hierarchy of nested elements
marked with start and end tags—the DOM creates a different object for each element,
but links each element object to its enclosing (or parent) element. This creates an
explicit parent-child relationship between elements, and lends the visualization of
the DOM most readily to a tree structure.
To create the DOM for a document, each element in the HTML is represented by
what’s known as a node. A node’s position in the DOM tree is determined by its
parent and child nodes.
An element node is distinguished by its element name (head, body, h1, etc.), but
this doesn’t have to be unique. Unless you supply some identifying characteristic—
like an id attribute—one paragraph node will appear much the same as another.
Technically, there’s a special node that’s always contained in a document, no matter
what that document’s content is. It always sits right at the top of the tree and it’s
called the document node

In HTML code, anything that’s not contained between angled brackets will be interpreted
as a text node in the DOM. Structurally, text nodes are treated almost exactly
like element nodes: they sit in the same tree structure and can be reached just like
element nodes; however, they cannot have children.

Attribute Nodes

With tags and text covered by element and text nodes, the only pieces of information
that remain to be accounted for in the DOM are attributes. At first glance, attributes
would appear to be part of an element—and they are, in a way—but they still occupy
their own type of nodes, handily called attribute nodes.

Accessing the Nodes you Want

Now that we know how the DOM is structured, we’ve got a good idea of the sorts
of things we’ll want to access. Each node—be it an element, text, or attribute
node—contains information that we can use to identify it, but it’s a delicate matter
to sort through all of the nodes in a document to find those we want.
In many ways, manipulating an element via the DOM is a lot like applying element
styles via CSS. Both tasks take this general pattern:
1. Specify the element or group of elements that you want to affect.
2. Specify the effect you want to have on them.

Let's sort out some objects from an HTML file




In this example, we will use Javascript to grab the list element and save all the lists to an array



That's it! All lists automatically get sent to an array

Copyright © 2006-2007 Coding, Programming Tutorials. Powered by Zeeblo Webhosting 2.1.3 | 0.0112