|
The Document Object Model is the means by which
Javascript can access and modify the content of both
your web page content and also any stylesheets attached
to it.
This concept was introduced in Internet Explorer 4
(using document.all) and in Netscape 4 (using
document.layers) prior to a standard Document Object
Model being developed. The standard DOM was developed
prior to any subsequent browser versions being released
and so all version 5+ browsers support the standard DOM
to some extent although no version 8 browser yet
supports all of the standards.
In this series of tutorials we will look more closely
at the standard Document Object model and how to use it
to access, update, add, and delete elements within your
web page. We'll begin by looking at an alternative
view of how the HTML on a web page is structured that
relates more closely to how Javascript sees the page.
In order to follow this discussion we will need to sort
out some of the terminology that I am going to be
using. First off when I refer to a tag I mean an
element of our web page source contained within less
than/greater than symbols for example <head> is a
tag, </body> is another. When I refer to a
container I mean a matching pair of opening and
closing tags (eg. <head> and </head>) or a
singleton (or self closing) tag (<hr>, <br>
and <img>).
The HTML containers and the text within them can be
viewed as an inverted tree structure with the HTML
container at the root (top) of the tree and those
containers and text contained within it forming
branches extending downward from that root. The second
"layer" of our inverted tree will always have
two branches - one for the head container and the other
for the body container. The lower layers within our
tree will then have branches for each of the containers
and text contained within them. The bottom most layer
("leaves") will be the text content of our
page and any empty containers.
Sometimes the elements within out tree structure are
referred to as Nodes. We have two types of nodes
in our tree - HTML nodes representing the containers
within our HTML document and text nodes holding the
text content within those containers.
At this point you are probably wondering why we are
taking so much time and trouble to come up with this
alternative (and in some ways more complicated) way of
viewing our web page. The answer is that both the CSS
that you apply to tell your page how to display and any
Javascripts that need to access the content of the page
view your web page in exactly this way.
There are of course a number of things that some people
do with their HTML page coding that doesn't allow
the HTML to be mapped into an inverted tree like this.
Any missing closing tags or closing tags around the
wrong way will mean that you will not be able to
directly map your HTML into a tree structure like this.
The point is that no browser will be able to perform
such a mapping directly either. Where you have made
such coding errors in your HTML the browser will make
assumptions on which closing tags to swap around in
order to close containers in the right order and will
also make assumptions as to where the missing closing
tags should be inserted. It will then display the page
based on this corrected version of the HTML. The
problem with this is that not all browsers will apply
the corrections to your HTML in exactly the same way
and so where you force the browser to fix your HTML for
you your page is more likely to look completely
different in different web browsers. Much better if you
code your HTML correctly in the first place.
The W3C is the body that sets the standards for HTML
and you can easily check any web page to see if it is
correctly coded using the W3C Validator. This will not
only tell you if you have any closing tags missing or
misplaced, it will also tell you if you are using any
tags that are proprietary to a particular browser and
not part of the standard HTML, if any of the tags you
are using have been deprecated (which usually means
that they have been replaced by stylesheet commands)
and it will also check that the attributes of your tags
(eg. src="myfile.gif") are allowed to be used
on particular tags. With valid HTML we can be sure that
all browsers will allow us to use the same tree
structure in accessing our HTML from both CSS and
Javascript.
Note that where I have referred to HTML above that the
same applies to XHTML except that the singleton tags
are also required to be closed by adding a slash before
the greater than (eg. <br />).
|
| 