JavaScript cloneNode()方法详解

原创 yiXiaoWang 随笔 javascript方法总结 1315阅读 2015-04-22 09:48:36 举报

cloneNode()方法接受一个布尔值参数,表示是否深拷贝,当参数为true时,表示深复制,为false时,表示浅复制 。复制后返回的节点副本属于文档所有,但是并没有父节点.可以使用appendChild,insertChild(),replaceChild()等方法将其添加到文档 。

true:表示执行深拷贝,复制本节点以及整个子节点树。即能复制所有的childNodes。
false:表示执行浅拷贝,只复制节点本身,复制后其children.length总是为0。

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var div = document.getElementById('div1');
var cln=div.cloneNode(true);
document.body.appendChild(cln);
alert(cln.children.length); //3(当参数为false时,始终为0)
}
</script>
</head>

<style>

div1{

width: 100px;
height: 50px;
margin: 20px;
background: red;

}

</style>
<body id = "body">
<div id = "par">
<div id = "div1">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
</html>[/code]

注意:不管是深复制还是浅复制,都复制不了事件,要复制事件,就要重新来复制或者直接利用事件代理的方式来处理。

[code]<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
alert("a");
}
var cln=div.cloneNode(false);
document.body.appendChild(cln);
cln.onclick = div.onclick;
alert(cln.children.length);
}
</script>
</head>

<style>

div1{

width: 100px;
height: 50px;
margin: 20px;
background: red;

}

</style>
<body id = "body">
<div id = "par">
<div id = "div1">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
</html>[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复