使用js完成节点的增删改复制等的操作


Posted in Javascript onJanuary 02, 2014

需求:完成节点的增删改复制的操作

用到的方法和属性:
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>
Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
js实现动态改变字体大小代码
Jan 02 #Javascript
js创建元素(节点)示例
Jan 02 #Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 #Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 #Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 #Javascript
JS脚本defer的作用示例介绍
Jan 02 #Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 #Javascript
You might like
PHP回调函数概念与用法实例分析
2017/11/03 PHP
php实现的顺序线性表示例
2019/05/04 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
动手学习无线电
2021/03/10 无线电
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
使用python3构建文件传输的方法
2019/02/13 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
护士自荐信怎么写
2013/10/18 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
小加工厂管理制度
2014/01/21 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
人民调解员培训方案
2014/06/05 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
会计专业自荐信范文
2019/05/22 职场文书
导游词之崇武古城
2019/10/07 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏