使用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 相关文章推荐
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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错误级别的设置方法
2013/06/17 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
python连接字符串的方法小结
2015/07/13 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
先进工作者获奖感言
2014/02/08 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
趣味运动会活动方案
2014/02/12 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
小学校本培训方案
2014/06/06 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
vue实现在data里引入相对路径
2022/06/05 Vue.js
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python