When a browser loads a Web page, it reads the HTML and holds
the document information in memory (as well as displaying it on-screen). The
Document Object Model, or DOM, is a specification of how the document is
represented in memory and how the document information can be accessed and
modified. Much of the power of client-side scripts comes from their ability to
use the DOM to manipulate an HTML document in the browser.
The structure of the DOM is based upon the structure of the
HTML document, Let us recall the structure of HTML document:
- At the top of the hierarchy is the Document object, which corresponds to the <html> and the <body>tags in the document.
- The Document object has two children, the <head> and the <body> tags.
- The <head> element can have a variety of children, like a <title> tag.
- The <body> tag can have a variety of children, including paragraph and table elements.
- The text within a <p> tag is considered a child of the paragraph element.
Example below shows a simple HTML document code:
<html> <head> <title>Sample</title> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> </html>
Thus, the DOM of the above mentioned code would be like:
Each box represents an element or node in the document. The
Mozilla Firefox browser also has a DOM Inspector that you can use to have a
look at the DOM yourself to see how pages are broken down.
Before getting to the details of the DOM, there are some
terminologies you should know:
- Parent: The node directly above a node. Every node in an HTML document has one and only one parent except the top-level node, which has no parent.
- Child: A node directly below a node. A node can have zero, one, or more children.
- Siblings: Two or more nodes with the same parent.
- Ancestor: A node that is one or more levels above another node.
- Descendant: A node one or more levels below a node.
Accessing Document
Elements
When you are working with the DOM, you need to access
specific elements in the document. There are several ways to do this: by unique
ID, by type or by name.
Unique ID
One of the methods of accessing individual elements of the
document is to make use of an element’s unique id attribute. You can add an id
attribute to any kind of element in the document like paragraph, tables,
headings links etc. Here are a few examples:
<p id='paragraph'>………..</p> <table id='table'>………….</table> <h1 id='h1heading'>……….</h1>
Each id value must be unique within the document. This
allows the value of an element’s id attribute to uniquely identify the element.
You can then access the element by using the document object’s getElemenyById() method. For example,
the code:
document.getElementById(“paragraph”)
would let you access the <p>element from the last
example. You could then change the text in the paragraph, change its font size
and color, and so on which you will see as the chapter progress.
Type
In this method, you can access the document’s elements by
virtue of the type of element and its position in the document hierarchy. This
works for the following types of elements:
Anchors (all <a>tags), forms, images, and links (those <a>tags which are hyperlink). You do this by using the following properties:
document.anchors document.forms document.images document.links
Each of these properties returns a collection that contains
all of the elements of the specified type.
Name
The last way to access document elements is with the name
attribute. This is similar to id except that multiple elements in a document
can have the same name attribute.
<a name='section1'>First para text</p> <a name='section1'>Second para text</p> <p name='section1'>Third para text</p>
Now you will use the getElementByName()
method to access the elements. Because the name attribute does not have to be
unique, this method can return one or more elements. You then need to access
the individual items in the collection, which we will cover soon.
You have seen that several methods of accessing document
elements return a collection that contains references to zero, one or more
elements. Once you have a collection, you can go through it and access all the
elements in turn or you can access a single element. A collection has the
length property that tells you how many items it contains. For example, the
expression document.links.length will
return the number of links in the document. You can access individual elements
in a collection by using brackets after the collection name:
document.links[n]
The argument n is a number giving the position of the
element in the document. It can range from 0 (the first element of the
specified type) to length -1 (the last element). The order of elements is the
same as their order in the HTML code.
0 comments:
Post a Comment