ECMAScript5对DOM模型Node的操作

来源：互联网发布：千牛软件何用编辑：程序博客网时间：2024/06/02 04:55
<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); //truealert(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