<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>
ECMAScript5对DOM模型Node的操作
最新推荐文章于 2022-05-19 17:32:31 发布