<!DOCTYPE html>
<html lang="zh" id="htmlId">
<head id="headId">
<title>BOM基础,复制、克隆节点</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<style>
</style>
</head>
<script type="text/javascript">
var totalStr = "";
function showTheChildsOf(element,index)
{
for(var i=0;i<element.childNodes.length;i++)
{
var tempEle = element.childNodes[i];
totalStr = totalStr.concat("第"+index+"层: "+"nodeType:"+tempEle.nodeType + " nodeName:"+tempEle.nodeName + " nodeValue:"+tempEle.nodeValue);
if (tempEle.childNodes.length !=0)
{
showTheChildsOf(tempEle,index+1);
}
}
}
function eduFun()
{
var theSelect = document.getElementById("edu");
showTheChildsOf(theSelect,1);
alert(totalStr);
totalStr = "";
for(var i=0;i<theSelect.childNodes.length;i++)
{
var tempEle = theSelect.childNodes[i];
if(tempEle.nodeName+"" == "OPTION")
{
alert(tempEle.childNodes[0].nodeValue);
}
}
var options = document.getElementsByTagName("option");
for(var j=0;j<options.length;j++)
{
alert(options[j].text);
}
}
function addOneOption()
{
var theSelect = document.getElementById("edu");
var newOpt = new Option();
newOpt.text = "中学^_^";
newOpt.value = "中学";
theSelect.options.add(newOpt);
var option = document.createElement("option");
option.value = "小学";
option.text = "小学^_^";
theSelect.appendChild(option);
var theNewSelect = document.getElementsByTagName("select")[0];
theNewSelect.innerHTML = theNewSelect.innerHTML + "<option value='高中'>高中^_^</option>";
}
function getLi()
{
var uls = document.getElementsByTagName("ul");
var theul = uls[0];
showTheChildsOf(theul,1);
alert(totalStr);
totalStr = "";
alert(theul.childNodes[1].childNodes[0].nodeValue + theul.childNodes[1].childNodes[1].childNodes[0].nodeValue + theul.childNodes[1].childNodes[2].nodeValue);
}
function changePre()
{
var pre1 = document.getElementById("pre1");
var pre2 = document.getElementById("pre2");
// 相当于把pre2覆盖到pre1,pre1从原有位置消失。
document.body.replaceChild(pre2,pre1);
var new1 = pre2.cloneNode(true);//true 类似于深拷贝
var new2 = pre1.cloneNode(true);
document.body.replaceChild(new1,pre1);
document.body.replaceChild(new2,pre2);
}
</script>
<body id="bodyId">
<ul>
<li id="bj" value="beijing">
北京
<h1>海淀</h1>
奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
</ul>
<input type="button" value="li取值" οnclick="getLi()">
<pre id="pre1">
/*
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:LI nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:北京
第2层: nodeType:1 nodeName:H1 nodeValue:null
第3层: nodeType:3 nodeName:#text nodeValue:海淀
第2层: nodeType:3 nodeName:#text nodeValue:奥运
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:LI nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:上海
第1层: nodeType:3 nodeName:#text nodeValue:
*/
</pre>
<select name="edu" id="edu">
<option value="本科">本科^_^</option>
<option value="大专">大专^_^</option>
<option value="中专">中专^_^</option>
<option value="幼儿园">幼儿园^_^</option>
</select>
<input type="button" value="学校详情" οnclick="eduFun()">
<input type="button" value="添加一个Option" οnclick="addOneOption()">
<pre id="pre2">
/*
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:OPTION nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:本科^_^
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:OPTION nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:大专^_^
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:OPTION nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:中专^_^
第1层: nodeType:3 nodeName:#text nodeValue:
第1层: nodeType:1 nodeName:OPTION nodeValue:null
第2层: nodeType:3 nodeName:#text nodeValue:幼儿园^_^
第1层: nodeType:3 nodeName:#text nodeValue:
*/
</pre>
<input type="button" value="pre1替换pre2" οnclick="changePre()">
</body>
</html>