Beginning Ajax With ASP.NET (2006).pdf

JavaScript and the Document Object Model
DOM Tree 2
This is the Header
This is a paragraph of text.
List Item 1
List Item 2
alert(“About to change the document.”);
// ... script code goes here ...
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