Write to UsJavascript DOM and Nodes
What exactly is the DOM? The Document Object Model is a platform that allows scripts to access and manipulate the content, structure and style of a web document. Dynamic HTML, a combination of Javascript, Cascading Style Sheets, and HTML used to animate webpages, relies entirely on the DOM. The World Wide Web Consortium (W3C) is always upgrading the DOM hoping to make it universal for all browsers. However many features of the IE and NN object models are not in W3C's DOM, and this could lead to problems. Whenever you write a script that manipulates a webpage's conten make sure your script will work in popular browsers like Opera, Mozilla Firefox, Netscape, and Internet Explorer.
Suppose you have the following HTML script as part of your webpage:
<p id=”first_paragraph”>A few years ago, his first novel was published under a pen-name. <em>Unfortunately</em> only <b><u>5000</u> copies</b> were sold. </p><br />
The paragraph above would look like this in a brower:
A few years ago, his first novel was published under a pen-name. Unfortunately 5000 copies were sold the first year.
In the DOM object model, you have a tree (starting from P) that goes as follows:
<P> |
||||
_________ |
______________________________ |
_______ |
||
| |
| |
|||
Child Nodes |
Attributes |
|||
| |
| |
|||
A few years ago, his first novel |
id = “first paragraph” |
|||
| | | ||||
| |
||||
|__<em>_ | ______ __only _<b>__ were sold the |
first year. |
||
| |
| | |||
Unfortunately |
|
|
|||
|
||||
|
| |
||||
5000 |
Everything inside the <p></p><br /> tags is a child of <p>, and everything inside the <b></b> tags is a child of <b>, and if <b> is inside <p>, then every child of <b> is also a child of <p>. This tree, of course, starts in P, but that's not the beginning of the DOM Object Model, which starts in the HTML element, like this:
<HTML> ---> <HEAD> --> <TITLE> --> <BODY>
If the piece of HTML you saw above comes after the body, then <P> and all of its attributes and ChildNodes would follow. If you want to use the DOM to make any alteration to the small paragraph, you can use document.getElementsByTagName('p')[indexOfParagraph]. If there's an ID inside the <p> tag,
document.getElementById('id of paragraph') would work as well.
Let's try document.getElementById('id of paragraph') first, shall we? As you already know, writing the HTML code above produces the following output:
A few years ago, his first novel was published under a pen-name. Unfortunately 5000 copies were sold the first year.
Suppose you want to change the writer's luck. Instead of saying Unfortunately 5000 copies were sold, you want to say Fortunately 5,000 copies were sold the first year. How would you do it?
First of all you need to remember that the word Unfortunately is enclosed between <em></em> and <em> is a child of <p>, which has id="first paragraph" as an attribute.
Examine the following script:
<script language="javascript1.2" type="text/javascript">
var i;
for (i=0; i <10; i++)
{
document.write("<p>When the childNode of p has a value of ChildNode[" + i + "] the output is <b>" + document.getElementById('first paragraph').childNodes[i].nodeValue + "</b></p><br /><br>");
}
</script>
Notice the bold part has the line document.getElementById('first paragraph').childNodes[i].nodeValue, which will address everything inside the <p> tag with the id of first paragraph. If you ran this script, you'd get this output: