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 相关文章推荐
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
使用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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP源码之explode使用说明
2011/08/05 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php实现文件下载实例分享
2014/06/02 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
Smarty保留变量用法分析
2016/05/23 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python基础while循环及if判断的实例讲解
2017/08/25 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
服务员岗位职责
2014/01/29 职场文书
售后求职信范文
2014/03/15 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python