使用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函数
Jul 21 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
JavaScript实现简单拖拽效果
Sep 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
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python保存网页图片到本地的方法
2018/07/24 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
python 利用zmail库发送邮件
2020/09/11 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
健康家庭事迹材料
2014/05/02 职场文书
小学课外活动总结
2014/07/09 职场文书
学生检讨书如何写
2014/10/30 职场文书
投标邀请书范本
2015/02/02 职场文书
会计求职自荐信范文
2015/03/04 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
python开发人人对战的五子棋小游戏
2022/05/02 Python