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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
Python新手实现2048小游戏
2015/03/31 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python温度转换华氏温度实现代码
2020/12/06 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
造型师求职自荐信
2013/09/27 职场文书
计算机求职信
2013/12/01 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
课程设计的心得体会
2014/09/03 职场文书
大学生入党群众意见书
2015/06/02 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL