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 相关文章推荐
关于全局变量和局部变量的那些事
Jan 11 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
js实现查询商品案例
2020/07/22 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python 类之间的参数传递方式
2019/12/20 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
super()与this()的区别
2016/01/17 面试题
英文版区域经理求职信
2013/10/23 职场文书
教师实习自我鉴定
2013/12/18 职场文书
党风廉政承诺书
2014/03/27 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python