使用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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue实现户籍管理系统
May 29 Javascript
JavaScript实现前端倒计时效果
Feb 09 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
js实现轮播图特效
2020/05/28 Javascript
全面理解Python中self的用法
2016/06/04 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
一个C/C++编程面试题
2013/11/10 面试题
玩具公司的创业计划书
2013/12/31 职场文书
养殖项目策划书范文
2014/01/13 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
房地产活动策划方案
2014/05/14 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
创业计划书之废品回收
2019/09/26 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
Django显示可视化图表的实践
2021/05/10 Python
pycharm代码删除恢复的方法
2021/06/26 Python