Try It Out Modifying the Document Tree

The document tree as defined by DOM Level 1 is flexible and powerful enough that a document can be constructed from scratch using script code. Rarely is this necessary, however, with documents being defined with standard (X)HTML markup and the document trees being manipulated after being loaded and parsed by the browser. Any element within the document tree can be modified and manipulated using JavaScript at any time. For example, you might want to change the contents of the header, write more paragraph content dynamically, and also remove or delete the unordered list. Examine the JavaScript code that follows, which does just that:

// Get a nodelist with all the header elements

var headerNodeList = document.getElementsByTagName(“h1”);

// We know there is only 1, so get a reference to the 0th element var hdr = headerNodeList[0];

// Use that reference to change the text/data

hdr.firstChild.data = “My Dynamically written Header Text”;

// Get a nodelist with all the paragraph elements

var paragraphNodeList = document.getElementsByTagName(“p”);

// We know there is only 1, so get a reference to the 0th element var paragraph = paragraphNodeList[0];

// Use that reference to change the text/data.

paragraph.firstChild.data = “This represents the new text of the first paragraph.”;

// Get a nodelist with all the ul elements

var ulNodeList = document.getElementsByTagName(“ul”);

// We know there is only 1, so get a reference to the 0th element

58

Chapter 3

var ul = ulNodeList[0];

// Using the parentNode (in this case the ‘body’ element), remove that child element

paragraph.parentNode.removeChild(ul);

// create a new Text node for the second paragraph

var newTextNode = document.createTextNode(“This text is the second set of paragraph text”);

// create a new Element to be the second paragraph var newElementNode = document.createElement(“p”);

// put the text in the paragraph

newElementNode.appendChild(newTextNode);

// and put the paragraph on the end of the document by appending it to // the BODY (which is the parent of para)

paragraph.parentNode.appendChild(newElementNode);

Figure 3-5

“DOM Tree 1” “This is the Header”

“This is a paragraph of text”

document

HTML

h1 ul

head

title p

body

“List Item 1” “List Item 2”

li li

59 JavaScript and the Document Object Model

As a matter of interest, you will note the use of an index to retrieve element number ⁰in the node list, or the first element. The getElementsByTagName()method returns a node list, or an array of nodes, so you can use an array indexer to return a particular element in that array. Alternatively, you could use the itemmethod to return a particular element number in that array list like this:

var hdr = headerNodeList.item(0);

The web page structure should look something like the document that follows (with the script code omitted for brevity):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

</head>

<body>

<h1>This is the Header</h1>

<p>This is a paragraph of text.</p>

<ul>

</ul>

alert(“About to change the document.”);

// ... script code goes here ...

</script>

</body>

</html>

Here you have dynamically manipulated the document tree, with the browser simply rendering the con-tents of that tree as they are changed.

In the previous example, you accessed elements using the getElementsByTagName()method, which returns a list of nodes (if any) of the specified element. Although this certainly works, you will more often use the getElementById()method that returns a reference to a specific element. You were first introduced to getElementById()in the last chapter, and while this method allows more immediate access to a particular element, it does require that elements be defined with a unique id attribute in the document itself. Consider the following:

For this particular example, it is important that the preceding script code be placed after the markup code in the document. If this code were placed in the <head>section for example, as most of the previous examples have done, the document tree would not have been constructed yet because the browser has not had a chance to parse those sections of markup and so the script code would fail.

60

Chapter 3

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

<h1 id=”hdr1”>This is the Header</h1>

<p id=”p1”>This is a paragraph of text.</p>

</ul>

alert(“About to change the document.”);

// ... script code goes here ...

</script>

</body>

</html>

This document is almost identical to the previous example except for the addition of id attributes to each of the elements you want to manipulate. The JavaScript code can then be simplified a little to make use of the getElementById()method, as shown in the following:

// Get a node reference to the header element var hdr = document.getElementById(“hdr1”);

// Use that reference to change the text/data.

hdr.firstChild.data = “My Dynamically written Header Text”;

// Get a node reference to the paragraph element var paragraph = document.getElementById(“p1”);

// Use that reference to change the text/data.

paragraph.firstChild.data = “This represents the new text of the first paragraph.”;

// Get a node reference to the ul element var ul = document.getElementById(“ul1”);

// Using the parentNode (in this case the ‘body’ element), remove that child element

paragraph.parentNode.removeChild(ul);

// create a new Text node for the second paragraph

var newTextNode = document.createTextNode(“This text is the second set of paragraph text”);

// create a new Element to be the second paragraph var newElementNode = document.createElement(“p”);

// put the text in the paragraph

newElementNode.appendChild(newTextNode);

// and put the paragraph on the end of the document by appending it to // the BODY (which is the parent of para)

paragraph.parentNode.appendChild(newElementNode);

61 JavaScript and the Document Object Model

The method getElementById()allows immediate access to a node within the tree, whereas the getElementsByTagName()returns a list of nodes that you must examine further in order to ultimately retrieve the node object you require. Ultimately, you have a reference to a DOM node object within the document tree.

Dans le document Ajax with ASP.NET (Page 83-87)