<!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. AHD-模拟高清芯片RN6752替代TVP5150/CJC5150

    RN6752功能:2路CVBS转BT656/601/1302高清视频解码芯片.产品特征输入:2路CVBS(不能同时输入)和S-VIDEO(一般不用)输出:BT601/656/1302支持NTSC,PA ...

  2. hashlib使用时出现: Unicode-objects must be encoded before hashing

    # hashlib.md5(data)函数中,data参数的类型应该是bytes# hash前必须把数据转换成bytes类型>>> from hashlib import md5 F ...

  3. C++与类型转换相关的四个关键字及其特点

    1.reinterpret_cast (expression) type-id 必须是一个指针.引用.算术类型.函数指针或者成员指针. 它可以把一个指针转换成一个整数,也可以把一个整数转换成一个指针( ...

  4. spring boot / cloud (十六) 分布式ID生成服务

    spring boot / cloud (十六) 分布式ID生成服务 在几乎所有的分布式系统或者采用了分库/分表设计的系统中,几乎都会需要生成数据的唯一标识ID的需求, 常规做法,是使用数据库中的自动 ...

  5. NAT集群部署solo之session server

    author:JevonWei 版权声明:原创作品 使用Nginx做代理服务器,部署solo,使用session server做会话黏滞 拓扑图 环境 tomcatA 172.16.253.108 t ...

  6. Linq--一个集合中查找另一个集合，需熟悉这种写法

    //获取科室与病区授权的护士信息        public List<SYS_ZGKSBQDYK> GetUserWardMapByWardCode(string wardCode)   ...

  7. WebServices 之 WSDL

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt234 一,WSDL概述 WebServices Description La ...

  8. 49、html基础认识&常用标签（1）

    从今天期我们进入前端的学习,先学习html,没有任何需要逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock ...

  9. Push or Pull?

    采用Pull模型还是Push模型是很多中间件都会面临的一个问题.消息中间件.配置管理中心等都会需要考虑Client和Server之间的交互采用哪种模型: 服务端主动推送数据给客户端? 客户端主动从服务 ...

  10. Django1.10主题指南—模型

    模型是你的数据的唯一的.权威的信息源.它包含你所储存数据的必要字段和操作行为.通常,每个模型都对应着数据库中的唯一一张表. 基础认识: 每个model都是一个继承 django.db.models.M ...