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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
vue给对象动态添加属性和值的实例
Sep 09 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
vue axios用法教程详解
2017/07/23 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
JS实现打字游戏
2019/12/17 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
django实现支付宝支付实例讲解
2019/10/17 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
增大python字体的方法步骤
2020/07/05 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
化学实验员岗位职责
2013/12/28 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
学术会议领导致辞
2015/07/29 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
python使用shell脚本创建kafka连接器
2022/04/29 Python