ECMAScript5对DOM模型Node的操作

最新推荐文章于 2022-05-19 17:32:31 发布

荆莿鸟的绝唱

最新推荐文章于 2022-05-19 17:32:31 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/only_love_strangers/article/details/46507685

版权

<html>
	<head>
	<title>
		ECMAScript5对Node的操作
	</title>
	<script type="text/javascript">
			window.onload = function(){
				//appendChild
				//新建一个div元素节点
				var newNode =document.createElement("div");
				newNode.appendChild(document.createTextNode("Hello World !"));
				//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后
				var resultNode =  document.body.appendChild(newNode);
				alert(newNode == resultNode); //true
				alert(newNode == document.body.lastChild); //true
				
				//insertBefore
				//新建一个div元素节点
				var insertNode1 = document.createElement("div");
				insertNode1.appendChild(document.createTextNode("Last Hollo World !"));
				//当insertBefore的第二个参数为空时，添加数据的操作跟appendChild效果相同，往现有子节点最后添加。
				var resultNode2 = document.body.insertBefore(insertNode1,null);
				alert(insertNode1 == document.body.lastChild);//true
				
				//新建一个div元素节点
				var insertNode2 = document.createElement("div");
				insertNode2.appendChild(document.createTextNode("First Hello World !"));
				//往第一个子节点的前面插入节点。
				var resultNode3 = document.body.insertBefore(insertNode2,document.body.firstChild);
				alert(insertNode2 == document.body.firstChild);//true
				
				//replaceChild
				//新建一个div元素节点
				var replaceNode = document.createElement("div");
				replaceNode.appendChild(document.createTextNode("Replace Hello World !"));
				//alert(document.body.children.length);
				document.body.replaceChild(replaceNode,document.body.children[1]);
			
				//removeChild
				//移除第一个子节点
				document.body.removeChild(document.body.firstChild);
				//移除最后一个子节点
				document.body.removeChild(document.body.lastChild);
				
				//cloneNode 克隆节点，传入参数ture 深复制，复制子节点，传入false 浅复制
				//深克隆
				var deepCloneNode = document.body.children[0].cloneNode(true);
				document.body.appendChild(deepCloneNode);
				//浅克隆
				var shallowCloneNode = document.body.children[0].cloneNode(false);
				document.body.appendChild(shallowCloneNode);
			}
			
	</script>
	</head>
	<body>
	</body>
</html>

荆莿鸟的绝唱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript5对DOM模型Node的操作

ECMAScript5对Node的操作 window.onload = function(){ //appendChild //新建一个div元素节点 var newNode =document.createElement("div"); newNode.appendChild(document.createTextNode("Hello World
复制链接

扫一扫