and Removing Nodes You can create new nodes, make a clone of an existing node, insert a new node before an existing node, remove a node, or replace a node.. Interactive pages are created
Trang 1and Removing Nodes)
You can create new nodes, make a clone of an existing node, insert a new node before
an existing node, remove a node, or replace a node All of this is possible because the
W3C DOM introduced methods to modify the DOM Table 15.6 lists the DOM methods
For a complete list of DOM methods and an excellent resource, go to the JavaScript Kit
page at http://www.JavaScriptkit.com/domref/elementmethods.shtml For another great
resource on how to modify the DOM, go to
http://www.howtocreate.co.uk/tutorials/Java-Script/dombasics.
3 This p element is also assigned attributes The dir attribute with rtl means the text
will be displayed from the right side of the screen to the left, as would be used with
Arabic or Hebrew
4 The getElementById() method uses the id of the first paragraph and returns a
ref-erence to it
5 The first paragraph has a dir and style attribute Using dir and style.fontSize,
Java-Script can get access to these attributes
6 The second paragraph has also been assigned attributes Using the dir and
class-Name properties, JavaScript can find the direction of the text, right to left, and the
name of the class that is used to style this paragraph The className property can
also be assigned the name of a different class to change the style of the object The
output is shown in Figure 15.11
Figure 15.11 Displaying HTML attributes with JavaScript properties.
E X P L A N A T I O N (C O N T I N U E D)
Trang 2The easiest way to get or modify the content of an element is by using the innerHTML
property Although the innerHTML is not a part of the W3C DOM specification, it is
sup-ported by all major browsers The innerHTML property is useful for inserting or replacing
the content of HTML elements; that is, the code and text between the element’s opening
and closing tag It can also be used to view the source of a page that has been dynamically
modified (including <html> and <body>) Interactive pages are created by simply changing
the value of the element’s innerHTML property Because it is a property, not a method,
innerHTML doesn’t return a reference to the content it inserts If you need to do more than
simply get or set content, then you can use specific DOM methods instead
In Example 15.5 the innerHTML property is used to retrieve the contents of two
para-graphs First we will give the paragraphs an id so that we can easily identify a particular
paragraph Next, with the id of the element, the getElementById method returns a
Java-Script reference to the specified paragraph, and finally the innerHTML property contains
the text between the <p></p> tags With this property we can easily modify the
para-graph’s text and style on the fly
appendChild(new node) Appends a new node onto the end of the list of child nodes.
cloneNode(child option) Makes a clone of a node.
getAttribute(attributeName) Returns the value of the attribute of the current node.
hasAtrributes() Returns a Boolean value if the node has defined attributes.
hasChildNodes() Returns a Boolean value if the node has defined child nodes
insertBefore(new node, current node) Inserts a new node in the list of children.
removeChild(child node) Removes a child node from a list of children
setAttributeNode(attributereference) Sets or creates an attribute for the current node
replaceChild(new child, old child) Replaces an old child node with a new one.
E X A M P L E 1 5 5
<html>
<head>
<title>innerHTML</title>
Trang 3<style type="text/css">
body{ background-color:blue;}
1 p { background: white;
font-style: bold;
font-family: courier,arial;
text-indent: 5%;
margin-left:20%;
margin-right:20%
}
</style>
</head
<body>
2 <p id="para1">Today is Sunday and there is a sailing festival
going on in the Ferry Park The tall ships are docked in the bay for tourists to visit The fog is rolling in.</p>
3 <p id="para2">I'm trying to figure out how to grab the text
from this paragraph with JavaScript using the innerHTML property I may take a break now and go to the park.</p>
<script type="text/javascript">
document.write("<p>JavaScript's innerHTML property</p>");
4 ptxt1=document.getElementById("para1").innerHTML;
5 ptxt2=document.getElementById("para2").innerHTML;
document.write("<p style='background:yellow'>"+
6 ptxt1.toUpperCase()+ "</p>");
document.write("<p style='background:yellow'>" +
7 ptxt2.toUpperCase()+ "</p>");
</script>
</body>
</html>
E X P L A N A T I O N
1 This is the CSS code to style paragraphs in this document
2 The first HTML paragraph element is given an id with the id attribute.
3 The second HTML paragraph element is also given an id.
4 The getElementById() uses the id of the paragraph to get a reference to the
para-graph By applying the innerHTML property to this reference, all the text between
<p></p> tags is assigned to the variable, ptext1.
5 By applying the innerHTML property to this reference, all the text between
<p></p> tags is assigned to the variable, ptext2.
6, 7 The text in both paragraphs is displayed in uppercase letters by applying the
toUp-perCase() method to the variables, ptxt1 and ptxt2 Figure 15.12 shows the result.
E X A M P L E 1 5 5 (C O N T I N U E D)
Trang 4By changing an element’s innerHTML property, after some user interaction, you can
change the text that occurs between that element’s opening and closing tag
Figure 15.12 JavaScript grabs the two paragraphs at the top of the page and
displays them at the bottom.
E X A M P L E 1 5 6
<html>
<head><title>Modify Text</title>
<style type="text/css">
body{background-color:aliceblue;}
.divStyle {
background-color:green;
margin-left:20%
margin-right:20%
border-style:solid;
color:white;
font-size:150%
}
</style>
Trang 5<script type="text/javascript">
1 window.onload=function(){
2 var divObj = document.getElementById("divtest");
4 divObj.innerHTML="Inserting new text in the
div container.";
}
</script>
</head>
<body>
5 <div id="divtest" class="divStyle">
6 Original text in div container.
</div>
</body>
</html>
E X P L A N A T I O N
1 When the page has finished loading the statements in the anonymous function are
executed
2 The variable, divObj, is assigned a reference to the div element identified by its id,
divtest.
3 By adding this alert, you will be able to see what was in the original div container
be-fore it is overwritten by the new text After the user clicks the alert’s OK button, the
new text will be displayed If the alert box is removed, the original text will be
over-written before you can see it The only output will be what you see in Figure 15.13
4 The innerHTML property is used to change the text within the <div></div> tags.
5 The id and class attributes are assigned to the <div> tag.
6 This is the original text that is modified by JavaScript on line 4 See Figure 15.14
Figure 15.13 The original text before it is modified.
E X A M P L E 1 5 6 (C O N T I N U E D)
Trang 6To create new elements on the fly, the DOM provides the createElement() method, and
for new text, the createTextNode() method Once you get a reference to the new element,
you must insert or append it to the document If, for example, you have created a p
ele-ment as follows:
var pref = document.body.createElement("p");
you can now append the new element to the body as follows:
document.body.appendChild(pref);
Now we can add text to the new paragraph by using the createTextNode() method and
the appendChild() method as follows:
txt = document.createTextNode("Hello, new paragraph!");
And finally, we will append this text to the new paragraph as:
new_pref.appendChild(txt);
Figure 15.14 Original text is modified using the innerHTML property.
E X A M P L E 1 5 7
<html>
<head><title>Creating a New Element</title>
<style type="text/css">
.divStyle { background-color:blue;
border-style:solid;
color:white;
} p{ color:yellow; font-size:150%;}
</style>
<script type="text/javascript">
// Create a new p element and append it to a div
1 window.onload=function(){
2 var para = document.createElement("p");
3 var divObj = document.getElementById("divtest");
Trang 74 divObj.appendChild(para);
5 var txt = document.createTextNode("Wow! Hope this works!");
}
</script>
</head>
<body>
7 <div id="divtest" class="divStyle">
<p>Original text in div container.</p>
</div>
</body>
</html>
E X P L A N A T I O N
1 After the page has completely loaded this anonymous function will be called
2 A new paragraph is created with the DOM’s createElement() method.
3 Now we get a reference to the div element defined on line 7.
4 The paragraph is appended to the div element with the DOM’s appendChild()
method (see Figure 15.15)
5 The DOM’s createTextNode() method will return a reference to the text that will be
placed within the new paragraph node
6 The text created on line 5 is appended to the paragraph
7 A div container is created with an id attribute, divtest, to be used on line 3 to get a
reference to the div element.
Figure 15.15 Creating a new p element with the DOM and appending it to a div
container.
E X A M P L E 1 5 7
Trang 8The insertBefore() method allows you to insert a child node before the specified node,
called the reference node, and if the reference node is null, this will insert the node at
the end of a list of child nodes
Example 15.8 demonstrates how to insert a new paragraph node into a DOM before
another node
F O RM A T
insertBefore(newElement, targetElement)
E X A M P L E
document.body.insertBefore(newPara, firstPara);
E X A M P L E 1 5 8
<html>
<head><title>Inserting Before</title>
<style type="text/css">
p { font-style:arial;
color:darkblue;
font-size:18;
}
</style>
<script type="text/javascript">
1 function insertMessage() {
2 var newPara = document.createElement("p");
3 var newText = document.createTextNode("I am inserting
myself above you!");
// If you copy this, don’t break the lines.
4 newPara.appendChild(newText);
5 var firstPara = document.getElementById("firstp");
6 document.body.insertBefore(newPara, firstPara);
}
</script>
</head>
7 <body onload="insertMessage()">
<p id=”firstp”>I was supposed to be first.</p>
</body>
</html>
E X P L A N A T I O N
1 Once the page has loaded, this function will be called
2 With the createElement() method, a new paragraph is created A reference to it is