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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
原生js实现回复评论功能
Jan 18 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP 日,周,月点击排行统计
2012/01/11 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python换行与不换行的输出实例
2020/02/19 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python开发前景如何
2020/06/11 Python
python接入支付宝的实例操作
2020/07/20 Python
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
2014和解协议书范文
2014/09/15 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js