使用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 相关文章推荐
js截取小数点后几位的写法
Nov 14 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue设置默认首页的操作
Aug 12 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Angular异步变同步处理方法
2018/08/13 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
详解python中init方法和随机数方法
2019/03/13 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
本科毕业生自荐信
2014/05/26 职场文书
企业人事任命书
2014/06/05 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
武夷山导游词
2015/02/03 职场文书
出生证明范本
2015/06/15 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis