使用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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
详解如何修改 node_modules 里的文件
May 22 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
数据库相关问题
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP 图片处理
2020/09/16 PHP
jquery插件之easing使用
2010/08/19 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
材料加工硕士生求职信
2013/10/10 职场文书
教师实习自我鉴定
2013/12/18 职场文书
信息技术教学反思
2014/02/12 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
计算机毕业生求职信
2014/06/10 职场文书
银行实习推荐信
2015/03/27 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers