DOM节点增删改操作

Posted gaoxuerong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于DOM节点增删改操作的主要内容，如果未能解决你的问题，请参考以下文章

js--原生js DOM操作(增删改差)

js操作DOM对象（节点的增删改）

07.31《jQuery》——3.1jQuery实现DOM节点的增删改

DOM操作增删改查

JS DOM节点增删改查 属性设置

DOM操作