JavaScript节点及列表操作实例小结


Posted in Javascript onAugust 05, 2015

本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下:

(1)创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

(2)添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore()

(3)查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

本节要用到的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.lastChild); //把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第一个子节点
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第一个子节点
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); //浅复制

下面再给大家一个JavaScript建立列表项目,复制子节点的完整实例:

这段JavaScript代码显示和建立列表项目,复制子节点、复制节点树,是相当有用的一个例子,在建立树形菜单的时候尤其有用处。

运行效果如下图所示:

JavaScript节点及列表操作实例小结

具体代码如下:

<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
  var strMsg = "节点名称 =" + objNode.nodeName + "\n";
  if (objNode.hasChildNodes()){
   var nodeCount = objNode.childNodes.length;
   strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
   for(var i = 0; i < nodeCount; i++)
     strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
   alert(strMsg);
  }
}
function copyNode(objNode, objDupNode, deep){
  var tempNode = objDupNode.cloneNode(deep);
  objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
  <li>项目1
  <li>项目2
   <ol id="myOL">
     <li>次项目1
     <li>次项目2
   </ol>
  <li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
coffeescript使用的方式汇总
Aug 05 #Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 #Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 #Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 #Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 #Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 #Javascript
You might like
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
js模拟实现Array的sort方法
2007/12/11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Python如何将函数值赋给变量
2020/04/28 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
远程调用的原理
2014/07/05 面试题
珍爱生命演讲稿
2014/05/10 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫