<!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. TC358743XBG：HDMI转MIPI CSI参考设计

    TC358743XBG参考设计电路图如下, 功能HDMI转MIPI CSI ,通信方式:IIC,分辨率1920*1080,封装形式BGA64.

  2. JS判断当前使用设备是pc端还是web端（转MirageFireFox）

    js判断当前设备 最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...

  3. outlook 无法搜索邮件的解决方法

    我的outlook版本是2007 SP3,英文版.一直有搜索不到邮件的问题,例如在搜索框输入发件人的名字,或者邮件中的词语,就是搜索不到邮件,即使那封邮件确实存在. 在网上搜索,Microsoft 的 ...

  4. mybaties-plus入门

    目前正在维护的公司的一个项目是一个ssm架构的java项目,dao层的接口有大量数据库查询的方法,一个条件变化就要对应一个方法,再加上一些通用的curd方法,对应一张表的dao层方法有时候多达近20个 ...

  5. 201521123013 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.多态是面向对象的三大特性之一.多态的意思:相同的形态,可以实不同的行为.Java中实现多 ...

  6. 201521123010 《Java程序设计》第13周学习总结

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

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...

  8. 201521123053《Java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 TCP和UDP两者之间的区别: UDP:1)将数据及源和目的封装成数据包中,不需要建立连接 ...

  9. 201521123101 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 te ...

  10. birt 报表设计总结

    1, 通过sql查询出来的数据,当某个字段没有值时,我们期望显示别的东东 在表格单元格或者网格中选中这个值, 在属性编辑器-->映射--> 在映射表中添加映射条件 映射中当使用 等于 时, ...