DOM节点增删改操作 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM节点增删改操作</title>
	</head>
	<body>
		<p id="s"><span id="ss">b</span><a id="sss">b</a></p>
	</body>
	
	<script type="text/javascript">
		/*除了cloneNode还有 appendChild()、insertBefore()、replaceChild()、removeChild()的用法*/
		var s=document.getElementById('s');
		var ss=document.getElementById('ss');
		var sss=document.getElementById('sss');
		var deepcopy=s.cloneNode(true);//深复制
		var lightcopy=s.cloneNode(false);//浅复制
		var deepparent= deepcopy.parentNode;
		console.log(deepcopy);
		console.log(lightcopy);
			console.log(deepparent);//null
		/*在参数为 true
的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，
即只复制节点本身。
复制后返回的节点副本属于文档所有，但并没有为它指定父节点。
因此，这个节点
副本就成为了一个“孤儿”，除非通过 appendChild()、insertBefore()或 replaceChild()将它添加到文档中。*/
/*
 cloneNode()方法不会复制添加到 DOM 节点中的 JavaScript 属性，例如事件处
理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切
都不会复制。IE 在此存在一个 bug，即它会复制事件处理程序，所以我们建议在复制
之前最好先移除事件处理程序。
  */
	</script>
</html>

 

posted @ 2017-11-08 13:41  gaoxuerong  阅读(192)  评论(0)    收藏  举报