JavaScript--05 DOM基础 12.9 12.10 复制、克隆节点

来源：互联网发布：2016网络超级红人节编辑：程序博客网时间：2024/04/28 05:22

<!DOCTYPE html>

<title>BOM基础，复制、克隆节点</title>

<style>

</style>

</head>

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>

<ul>

北京

奥运

</li>

上海

</li>

</ul>