使用js完成节点的增删改复制等的操作
2014-01-02 00:00
615 查看
需求:完成节点的增删改复制的操作
用到的方法和属性:
1.获取某个节点的父节点
parentNode属性
2.获取某个节点的子节点集合
childNodes属性
3.创键一个新的节点
createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好
createElement(对象) document对象的方法 例如:document.createElement("a");
4.给某个节点对象添加属性和属性值
setAttribute(属性,属性值); 例如:aNode.setAttribute("href","http://www.baidu.com");
5.替换某个节点下的子节点
replaceChild(新节点,原子节点);
6.将某个节点添加到一个节点下
appendChild(要添加的节点)
7.克隆某个节点
cloneNode() 不传参数和传入true参数一样,表示克隆该节点包括子节点
用到的方法和属性:
1.获取某个节点的父节点
parentNode属性
2.获取某个节点的子节点集合
childNodes属性
3.创键一个新的节点
createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好
createElement(对象) document对象的方法 例如:document.createElement("a");
4.给某个节点对象添加属性和属性值
setAttribute(属性,属性值); 例如:aNode.setAttribute("href","http://www.baidu.com");
5.替换某个节点下的子节点
replaceChild(新节点,原子节点);
6.将某个节点添加到一个节点下
appendChild(要添加的节点)
7.克隆某个节点
cloneNode() 不传参数和传入true参数一样,表示克隆该节点包括子节点
<!DOCTYPE html> <html> <head> <title>node_CURD.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> div{ border: red 1px solid; width: 200px; height: 50px; margin: 20px 30px; padding: 20px; } #div_1{ clear:both; background-color:#FF3366; } #div_2{ clear:both; background-color:#6699FF; } #div_3{ clear:both; background-color:#CCCC99; } #div_4{ clear:both; background-color:#00CC33; } </style> <script type="text/javascript"> // 增加方式一:给第一个div区域添加文本 function addText(){ //1.获取要添加文本内容的节点 var div_1Node = document.getElementById("div_1"); //2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。 var TextNode = document.createTextNode("这不就显示了吗?"); //3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法 div_1Node.appendChild(TextNode); } // 增加方式二:给第一个div区域添加按钮 function addButton(){ //1.获取要添加文本内容的节点 var div_1Node = document.getElementById("div_1"); //2.创建一个节点。document对象的createElement() var aNode = document.createElement("input"); //3.给指定对象添加属性和属性值 //aNode.setAttribute("type","button");//和下面一句代码达到的效果一样 aNode.type="button"; aNode.setAttribute("value","按钮"); aNode.setAttribute("onclick","deleteText('div_1')"); //4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法 div_1Node.appendChild(aNode); } // 删除方式一:删除第二个区域的节点的子节点 function deleteText(NodeId){ //1.获取块节点 var divNode = document.getElementById(NodeId); //2.获取子节点,即文本节点 var chileNode = divNode.childNodes[0]; //3.删除,传入一个参数true会删除其下所有子节点 //chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容 divNode.removeChild(chileNode); } // 删除方式二:删除元素 function deleteElement(){ //1.获取块节点 var div_2Node = document.getElementById("div_2"); //2.获取父节点, var parentNode = div_2Node.parentNode; //3.删除 parentNode.removeChild(div_2Node); } // 修改 function UpdateText(){ //1获取要修改字符的区域的节点 var div_3Node = document.getElementById("div_3"); //2.获取第一步中的子节点集合,指定到要修改的节点 var childNode = div_3Node.childNodes[0]; //3.创建一个文本节点 var newNode = document.createTextNode("哈哈,我把你替换了."); //4.用3步创建的节点替换2步骤中的节点 //childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容 div_3Node.replaceChild(newNode,childNode); } //克隆 function copyNode(){ //1.获取第四区域节点 var div_1Node = document.getElementById("div_1"); //2.获取第一区域节点 var div_4Node = document.getElementById("div_4"); //3.获得一个新节点通过克隆第四节点 var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点,包括子节点.默认是true参数的结果 //4.将步骤3的新节点替换掉原来的第一节点 div_1Node.parentNode.replaceChild(newNode,div_1Node); } </script> </head> <body> <div id="div_1"></div> <div id="div_2">这里是第二个区域</div> <div id="div_3">这里是第三个区域</div> <div id="div_4">这里是第四个区域</div> <hr /> <font size="12px">增:</font> <input type="button" value="给第一个区域增加文本" onclick="addText()" /> <input type="button" value="给第一个区域增加一个按钮" onclick="addButton()" /> <hr /> <font size="12px">删:</font> <input type="button" value="删除第二区域的文本内容" onclick="deleteText('div_2')" /> <input type="button" value="删除第二个区域" onclick="deleteElement()" /> <hr /> <font size="12px">改:</font> <input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" /> <hr /> <font size="12px">克隆:</font> <input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" /> </body> </html>
相关文章推荐
- 使用js完成节点的增删改复制等的操作
- 第十四课:js操作节点的插入,复制,移除
- JavaScript学习——使用JS完成全选和全不选操作
- 使用JS禁止粘贴、复制、剪切操作
- JS的节点操作:创建、增加、删除、复制、查找
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
- 如何使用Node.js操作redis来完成添加查询功能的具体介绍
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- 节点的增删改复制的操作
- js操作dom节点,创建,复制,删除,添加,查找等操作总结
- DOM树操作练习(增删改复制节点)
- js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
- js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
- 12、使用jQuery操作DOM之操作节点
- JDBC(2)-使用statment接口实现增删改操作
- Delphi中复制带有String的记录结构时不能使用Move之类的内存操作函数
- JAVA使用POI完成Excel批量导出操作
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- js操作剪贴板,实现点击按钮复制文本功能
- mysql如何使用延迟复制拯救你的误操作(及sql_slave_skip_counter的含义)