<!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. （转载）深入Java关键字this的用法的总结

    在Java程序设计中经常会见到this的使用,this使得程序设计变得规范.简单.灵活.但是在使用过程中,在不同场 合它的含义并不完全相同,使用不当还会出现错误, 本文对this的几种用法和出现的问题 ...

  2. IT团队之非正式沟通

      沟通能力是一种能证明和让对方发现你具有社会工作能力的能力.从表面上看来,它只是一种能说会道的能力,可实际上它却包罗了一个人从穿衣打扮到言谈举止等一切行为的能力.   从大体上,我将沟通分为正式沟通 ...

  3. fetch的使用说明

    1.RN官方文档中,可使用XMLHttpRequest var request = new XMLHttpRequest(); request.onreadystatechange = (e) =&g ...

  4. JUnit之TestCase和TestSuite详解

    首先介绍下TestCase以及TestSuite.    TestCase:字面意思,测试用例.为一个或多个方法提供测试方法.一般是一个test    TestSuite:测试集合,即一组测试.一个t ...

  5. 201521123091 《Java程序设计》第6周学习总结

    Java 第六周总结 第六周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以 ...

  6. 团队作业4——第一次项目冲刺（Alpha版本）2017.4.28

    2017.04.28 天气晴朗 东风3级. 时间:上午 9:35 ---10:10分 地点:陆大二楼 会议内容:实验室报修系统项目冲刺Alpha版的的最后一天,大家对现在项目的进程进行了讨论,阐述了各 ...

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

    1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 //contains()方法 public boolean contains(O ...

  8. 201521123075 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. - 了解了多态就是以单一的接口操作多种类型的对象,但是对多态和继承的关系还是有点混乱. - ...

  9. Java课程设计—学生成绩管理系统（54号童欢）

    1. 团队课程设计博客链接 http://www.cnblogs.com/wufuckshuo/p/7063183.html 2.个人责模块或任务说明 负责模块/任务:主函数(调用其他的功能函数),添 ...

  10. 201521123113《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. JDBC体系架构: 2. 书面作业 Q1. MySQL数据库基本操作 1.1 建立数据库test ...