<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="10_7ObjectCompile.aspx.cs"
Inherits="WebApplication1._10_7ObjectCompile" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="10_7ObjectCompile.js" type="text/javascript"></script>
</head>
<body>
<form action="#">
<p>
<textarea id="textArea" rows="5" cols="30"></textarea></p>
<p>
<label>
<input type="radio" name="nodeAction">Add node</label>
<label>
<input type="radio" name="nodeAction">Delete node</label>
<label>
<input type="radio" name="nodeAction">Insert before node</label>
<label>
<input type="radio" name="nodeAction">Replace node</label></p>
Paragraph #:
<select id="grafCount">
</select>
<input type="submit" value="Submit">
</form>
<div id="modifiable">
</div>
</body>
</html>
下面是对应的JS脚本
window.onload = initAll;
function initAll() {
//Call nodeChanger method when click the submit button
document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
chgNodes.init();
}
function nodeChanger() {
return chgNodes.doAction();
}
var chgNodes = {
actionType: function () {
var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
for (var i = 0; i < radioButtonSet.length; i++) {
if (radioButtonSet[i].checked == true) {
return i;
}
}
return -1;
},
init: function () {
this.nodeChgArea = document.getElementById("modifiable");
}, //Use "," between elements
doAction: function () {
switch (this.actionType()) {
case 0: //Add
this.nodeChgArea.appendChild(this.newGrafs());
break;
case 1: //Delete
if (this.pGrafCt() > 0) {
this.nodeChgArea.removeChild(this.oldGrafs());
}
break;
case 2: //Insert
if (this.pGrafCt() > 0) {
this.nodeChgArea.insertBefore(this.newGrafs(), this.oldGrafs());
}
break;
case 3: //Replace
if (this.pGrafCt() > 0) {
this.nodeChgArea.replaceChild(this.newGrafs(), this.oldGrafs());
}
break;
default:
alert("No valid action was chosen !");
}
document.getElementById("grafCount").options.length = 0;
for (var i = 0; i < this.pGrafCt(); i++) {
document.getElementById("grafCount").options[i] = new Option(i + 1);
}
return false; //The page value will be clear if set to true here
},
allGrafs: function () {
return this.nodeChgArea.getElementsByTagName("p");
}, //Get All 'p' tag
pGrafCt: function () {
return this.allGrafs().length;
}, //Get 'p' length
inText: function () {
return document.getElementById("textArea").value;
}, //Get textArea value
newText: function () {
return document.createTextNode(this.inText());
}, //CreateTextNode including textArea's value
grafChoice: function () {
return document.getElementById("grafCount").selectedIndex;
}, //Select paragraph's num
oldGrafs: function () {
return this.allGrafs().item(this.grafChoice());
}, //Get selected Node for existing
newGrafs: function () {
var myNewGraf = document.createElement("p");
myNewGraf.appendChild(this.newText());
return myNewGraf;
} //Create 'P' node
}