javascript学习笔记(十九) 节点的操作实现代码


Posted in Javascript onJune 20, 2012

本节要用到的html例子

<ul id="myList"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul>

1.创建元素节点
document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点
var div = document.createElement("div"); //创建一个div元素 
div.id = "myDiv"; //设置div的id 
div.className = "box"; //设置div的class

创建元素后还要把元素添加到文档树中

2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点

var ul = document.getElementById("myList"); //获得ul 
var li = document.createElement("li"); //创建li 
li.innerHTML = "项目四"; //向li内添加文本 
ul.appendChild(li); //把li 添加到ul子节点的末尾

添加后:
<ul id="myList"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
<li>项目四</li> 
</ul>

appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置
var ul = document.getElementById("myList"); //获得ul 
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

运行后(IE):
<ul id="myList"> 
<li>项目二</li> 
<li>项目三</li> 
<li>项目一</li> 
</ul>

insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点
var ul = document.getElementById("myList"); //获得ul 
var li = document.createElement("li"); //创建li 
li.innerHTML= "项目四"; //向li内添加文本 
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

添加后:
<ul id="myList"> 
<li>项目四</li> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul>

var ul = document.getElementById("myList"); //获得ul 
var li = document.createElement("li"); //创建li 
li.innerHTML= "项目四"; //向li内添加文本 
ul.insertBefore(li,ul.null); //把li添加到ul的子节点末尾

添加后:
<ul id="myList"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
<li>项目四</li> 
</ul>

var ul = document.getElementById("myList"); //获得ul 
var li = document.createElement("li"); //创建li 
li.innerHTML= "项目四"; //向li内添加文本 
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 
ul.insertBefore(li,lis[1]); 
//把li添加到ul中的第二个li节点前

添加后:
<ul id="myList"> 
<li>项目一</li> 
<li>项目四</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul>

3.移除元素节点
removeChild() 方法 ,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了
var ul = document.getElementById("myList"); //获得ul 
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点1 var ul = document.getElementById("myList"); //获得ul 
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 
ul.removeChild(lis[0]); 

//移除第一个li,与上面不同,要考虑浏览器之间的差异

4.替换元素节点
replaceChild() 方法 ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点
var ul = document.getElementById("myList"); //获得ul 
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点1 var ul = document.getElementById("myList"); //获得ul; 
var li = document.createElement("li"); //创建li 
li.innerHTML= "项目四"; //向li内添加文本 
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

5.复制节点
cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)
var ul = document.getElementById("myList"); //获得ul 
var deepList = ul.cloneNode(true); //深复制 
var shallowList = ul.cloneNode(false); //浅复制

节点的操作要注意IE和其它浏览器的差异(第十八节中有讲到)
Javascript 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 #Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 #Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 #Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 #Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 #Javascript
You might like
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php socket通信简单实现
2016/11/18 PHP
php修改数组键名的方法示例
2017/04/15 PHP
自制PHP框架之设计模式
2017/05/07 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python正则简单实例分析
2017/03/21 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
党员承诺书怎么写
2014/05/20 职场文书
实习证明格式范文
2014/10/14 职场文书
好媳妇事迹材料
2014/12/24 职场文书
离婚被告代理词
2015/05/23 职场文书
聘任合同书
2015/09/21 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技