使用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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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网页后退不再出现过期
2007/03/08 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
javascript 三种编解码方式
2010/02/01 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python模拟登录的多种方法(四种)
2018/06/01 Python
python爬虫实现中英翻译词典
2019/06/25 Python
关于python3中setup.py小概念解析
2019/08/22 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
幼儿园新学期寄语
2014/01/18 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
教师节学生演讲稿
2014/09/03 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
交通事故起诉书
2015/05/19 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏