<!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. django文件上传

    -------------------上传图片-------------------1.model中定义属性类型为models.ImageField类型 pic=models.ImageField(u ...

  2. SQL Server 2014 64位版本链接32位Oracle数据库

    问题背景: 刚进入公司不久的BI新手,最近接部门的一个交接项目,需要在SQL Server上通过openquery来获取Oracle数据库的数据.各种配置,各种设置折腾了一周之久.在此,将自己的问题解 ...

  3. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  4. MySQL（九）之数据表的查询详解（SELECT语法）二

    上一篇讲了比较简单的单表查询以及MySQL的组函数,这一篇给大家分享一点比较难得知识了,关于多表查询,子查询,左连接,外连接等等.希望大家能都得到帮助! 在开始之前因为要多表查询,所以搭建好环境: 1 ...

  5. mysql 索引B-Tree类型对索引使用的生效和失效情况详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt343 当人们谈论索引的时候,如果没有特别指明类型 ,那多半说的是 B-Tre ...

  6. Mysql分区表使用的一些限制和需要注意的地方

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt347 mysql分区策略都基于两个非常重要的假设:查询都能够过滤(prunn ...

  7. ReentrantLock和synchronized的性能对比

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytpo8 ReentrantLock和内部锁的性能对比     Reentran ...

  8. TypeScript入门知识二（参数新特性）

    一,参数类型 1.在参数的名称后面使用冒号来指定参数的类型,当赋值的不是指定类型数值时会报错. var myname: string = "zhang san"; 2.当你没有指定 ...

  9. 《深入浅出MySQL》之SQL基础

    SQL是Structure Query language(结构化查询语言)的缩写,它是使用关系模型的数据库应用语言.在众多开源数据中,MySQL正式其中最杰出的代表,MySQL是由三个瑞典人于20世纪 ...

  10. 七,UDP

    那天朋友问我为什么有UDP Sever 和 UDP Client   ,,我说:每个人想的不一样,设计上不一样...... 既然是面向无连接的,那么模块发数据就指定IP和端口号,,,为了能和多个UDP ...