<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function initAll(){
document.forms[0].onsubmit = nodeChanger; //点击submit调用nodeChanger函数
chgNodes.init(); //chgNodes对象的init方法函数 初始化nodeChgArea 也就是id为newBuild的div内的内容
};
function nodeChanger(){ // this引用取决于调用它的位置 如果onsubmit事件直接调用对象本身那么this就会指向表单对象
// 所以用一个函数返回值 this就会指向chgNodes对象本身
return chgNodes.doAction(); //返回chgNodes对象的doAction方法函数
};
var chgNodes = { //创建chgNodes对象
actionType:function(){ //创建actionType方法函数
var radioButtonSet = document.forms[0].radioAction; //获取名字为radioAction的元素 也就是获取单选按钮
for(var i=0; i<radioButtonSet.length; i++){ //遍历所有单选按钮
if(radioButtonSet[i].checked){ //如果按钮选中
return i //返回选中的那个按钮索引号
}
}
return -1; //没有选中返回-1
},
allGrafs:function(){ //创建allGrafs方法函数
return this.nodeChgArea.getElementsByTagName("p"); //this指的是chgNodes对象 用this可以在对象内任何地方调用对象本身
}, // 返回nodeChgArea属性内的所有p元素节点 nodeChgArea属性值为id为newBuild的div元素
pGrafCt:function(){ //创建pGrafCt方法函数
return this.allGrafs().length; //返回allGrafs方法对象的长度 allGrafs方法的值为id为newBuild的div元素内的所有p元素
},
inText:function(){ //创建inText方法函数
return document.getElementById("textarea").value; //返回textarea元素的值
},
newText:function(){ //创建newText方法函数
return document.createTextNode(this.inText()); // 返回新创建的文本节点 节点值为chgNodes对象的inText方法函数
}, // 也就是textarea元素的值
listOption:function(){ //创建listOption方法函数
return document.getElementById("listOption").selectedIndex; //返回下拉列表的索引
},
newPara:function(){ //创建newPara方法函数
var myPara = document.createElement("p"); //创建p元素节点
myPara.appendChild(this.newText()); //对象的newText方法函数的值插入到新建的p元素节点内部 newText方法函数的值为textarea值的文本节点
return myPara; //返回新建的p元素节点
},
oldGraf:function(){ //创建oldGraf方法函数
return this.allGrafs().item(this.listOption()); // 对象的allGrafs()方法重载为对象的listOption方法
}, // 也就是id为newBuild的div元素内的p元素重栽为下拉列表的索引 p索引和下拉列表索引对应
doAction:function(){ //创建doAction方法函数
switch(this.actionType()){ //检测对象的actionType方法函数 每一个按钮索引
case 0: //如果索引为0 第一个按钮 添加
this.nodeChgArea.appendChild(this.newPara()); //对象的newPara方法函数插入到对象的nodeChgArea方法函数内部
break; //newPara的函数值为新建的p元素 nodeChgArea函数的值为id为newBuild的div元素
case 1: //如果索引为1 第二个按钮 删除
if(this.pGrafCt()>0){ //如果id为newBuild内的p元素的数量大于0 也就是至少有一个
this.nodeChgArea.removeChild(this.oldGraf()); //从对象的nodeChgArea方法函数内部删除对象的oldGraf方法函数
break; //nodeChgArea函数的值为id为newBuild的div元素 oldGraf函数值为和下拉列表索引对应的p元素
}
case 2: //如果索引为2 第三个按钮 insterBefore
if(this.pGrafCt()>0){
this.nodeChgArea.insertBefore(this.newPara(),this.oldGraf()); //对象的newPara方法函数插入到对象的oldGraf方法函数前面
break; //newPara()方法函数的值为新创建的p元素 oldGraf函数值为和下拉列表索引对应的p元素
}
case 3: //如果索引为3 第四个按钮 raplace
if(this.pGrafCt()>0){
this.nodeChgArea.replaceChild(this.newPara(),this.oldGraf()) //对象的newPara方法函数替换对象的oldGraf方法函数
break; //newPara()方法函数的值为新创建的p元素 oldGraf函数值为和下拉列表索引对应的p元素
}
default:
alert("请选择正确按钮");
}
document.getElementById("listOption").options.length = 0; //初始化option的长度为0
for(var i=0; i<this.pGrafCt();i++){ //遍历id为newBuild的div元素内的所有p元素
document.getElementById("listOption").options[i] = new Option(i+1) //下拉别表每个索引值重新设置为i+1
}
return false;
},
init:function(){ //创建init方法函数
this.nodeChgArea = document.getElementById("newBuild"); //对象的nodeChgArea属性设置为newBuild元素
}
};
window.onload = initAll;
</script>
</head>
<body>
<form action="#">
<textarea id="textarea" rows="5" cols="25"></textarea>
<input type="radio" name="radioAction" />添加
<input type="radio" name="radioAction" />删除
<input type="radio" name="radioAction" />insertBefore
<input type="radio" name="radioAction" />replace
序列号:<select id="listOption"></select>
<input type="submit" value="Submit"/>
</form>
<div id="newBuild"></div>
</body>
</html>
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
