<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         var oUl=document.getElementById("ul1");

         var list=oUl.childNodes;

         // console.log(list);

         var arr=convertToArray(list);

         // console.log(arr);

         var arrList=getElementList(arr,1);

         // console.log(arrList);

         //使用appendChild添加子节点

         var returnNode=oUl.appendChild(arrList[0]);

         // alert(returnNode==arrList[0]);

         alert(oUl.firstChild.nextSibling);

         alert(oUl.firstChild.nextElementSibling);

         console.log(oUl.lastChild);

         //将获得的字节点转为数组

         function convertToArray(nodes){

             var array=null;

             try{

                 array=Array.prototype.slice.call(nodes,0);

             }catch(ex){

                 array=new Array();

                 for(var i=0,len=nodes.length;i<len;i++){

                     array.push(nodes[i]);

                 }

             }

             return array;

         }

         //将元素节点加入到数组中

         function getElementList(arr,value){

             var arrList=new Array();

             for(var i=0,len=arr.length;i<len;i++){

                 if(arr[i].nodeType==value){

                     arrList.push(arr[i]);

                 }

             }

             return arrList;

         }

     }

     </script>

 </head>

 <body>

     <ul id="ul1">

         <li>111</li>

         <li>222</li>

         <li>333</li>

     </ul>

 </body>

 </html>

1、appendChild是给父节点添加子节点，当添加的子节点已经是父节点下的子节点的时候，那么被添加的子节点的原来位置就会被顶上，而新增的子节点会成为父节点下的最后一个子节点。

注：在笔者实际的操作过程中，当使用nextSibling查询某个子节点的兄弟节点的时候，返回的是文本节点，也就是说，谷歌浏览器将文本节点视为一类子节点的集合，所以返回的子节点就是本文节点，而使用nextElementSibling返回的则是元素节点，不过这个属性在IE下是不起作用的。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oUl=document.getElementById("ul1");var list=oUl.childNodes;// console.log(list);var arr=convertToArray(list);// console.log(arr);var arrList=getElementList(arr,1);// console.log(arrList);
//使用appendChild添加子节点var returnNode=oUl.appendChild(arrList[0]);// alert(returnNode==arrList[0]);alert(oUl.firstChild.nextSibling);alert(oUl.firstChild.nextElementSibling);console.log(oUl.lastChild);

//将获得的字节点转为数组function convertToArray(nodes){var array=null;try{array=Array.prototype.slice.call(nodes,0);}catch(ex){array=new Array();for(var i=0,len=nodes.length;i<len;i++){array.push(nodes[i]);}}return array;}
//将元素节点加入到数组中function getElementList(arr,value){var arrList=new Array();for(var i=0,len=arr.length;i<len;i++){if(arr[i].nodeType==value){arrList.push(arr[i]);}}return arrList;}
}</script></head><body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body></html>

javascript中DOM集锦（二）的更多相关文章

  1. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  2. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  3. JavaScript中DOM的层次节点(一)

    DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...

  4. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  5. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  6. JavaScript中DOM查询封装函数

    在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...

  7. JavaScript中的类型转换(二)

    说明: 本篇主要讨论JavaScript中各运算符对运算数进行的类型转换的影响,本文中所提到的对象类型仅指JavaScript预定义的类型和程序员自己实现的对象,不包括宿主环境定义的特殊对象(比如浏览 ...

  8. javascript中DOM部分基础知识总结

    1.DOM介绍      1.1 DOM概念      文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. ...

  9. javascript之DOM篇二（操作）

    一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...

随机推荐

  1. 基于NIOS-II的示波器：PART4 系统调试&测试

    本文记录了在NIOS II上实现示波器的第四部分. 本文主要包括:修改部分BUG,以及测试 本文所有的硬件以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. version 1.0 界面修改& ...

  2. c# List集合中First、Last、Single方法使用

    操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...

  3. 使用JSR-303进行校验 @Valid

    一.在SringMVC中使用 使用注解 1.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate-validator-4.2.0.Fina ...

  4. python--学校管理系统（只做了学校管理的接口）

    1.老师的要求是做学校管理.学生.老师的接口,本文档,只做了学校管理的接口 2.具体要求: 角色:学校.学员.课程.讲师 要求: 1. 创建北京.上海 2 所学校 2. 创建linux , pytho ...

  5. 201521123020《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 运用到了equ ...

  6. 201521123122 《java程序设计》 第四周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 这个思维导图比较简单,详细内容点击此处 2. 书面作业 注释的应用 使用类的注释与方法的注释 ...

  7. 201521123081《Java程序设计》 第2周学习总结

    201521123081<Java程序设计>第2周学习总结 2017-03-04  14:35:49 1. 本周学习总结 学习了Java一些基本语句,了解了变量类型及其相互转化的方法: 学 ...

  8. 201521123048 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. 控制结构(5) 必经之地(using)

    // 上一篇:局部化(localization) // 下一篇:最近最少使用(LRU) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一周,我们谈到了分支/卫语句 ...

  10. sscanf和正则表达式

    sscanf() - 从一个字符串中读进与指定格式相符的数据.      函数原型: Int sscanf( string str, string fmt, mixed var1, mixed var ...