<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>parentNode</title>

     <script type="text/javascript">

         "use strict"

         window.onload=function(){

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

             var nodeList=oUl.childNodes;

             // console.log(nodeList);

             var arr=convertToArray(nodeList,0);

             console.log(arr);

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

                 console.log(arr[0].parentNode);

             }
 console.log(arr[0].nextSibling);

 //第一个子节点是没有previousSibling的

 console.log(arr[0].previousSibling);


         }

         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;

         }

     </script>

 </head>

 <body>

     <ul id="ul1">

         <li>111</li>

         <li>222</li>

         <li>333</li>

     </ul>

 </body>

 </html>




某个父节点的子节点所有的parentNode都是指向同一个节点，以上代码循环打出的，如下：


另外每个子节点都会有nextSibling和preciousSibling，当然，如果是第一个子节点则无previousSibling，而最后一个子节点是没有nextSibling的，返回的结果都是为null


每个子节点的集合中都会有firstChild和lastChild，只有当没有子节点的情况下，这两个值都为null，才相等。
												


											
DOM中的parentNode总结的更多相关文章
	

    
								
  1. javascript判断元素存在和判断元素存在于实时的dom中的方法
		
    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
    
		
    2. 
						
  2. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
		
    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...
    
		
    3. 
						
  3. DOM中的NodeList与HTMLCollection
		
    最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于N ...
    
		
    4. 
						
  4. DOM中的事件对象和IE事件对象
		
    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean  ...
    
		
    5. 
						
  5. html5中的dom中的各种节点的层次关系是怎样的
		
    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
    
		
    6. 
						
  6. javascript DOM中的节点层次和节点类型概述
		
    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...
    
		
    7. 
						
  7. DOM中的事件对象
		
    三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
    
		
    8. 
						
  8. DOM中元素节点、属性节点、文本节点的理解
		
    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...
    
		
    9. 
						
  9. DOM 中 Property 和 Attribute 的区别
		
    原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 实战案例--TEMPDB暴涨
			
    前言   tempdb暴增,造成磁盘空间不足,甚至影响业务运行.     正文   如图,tempdb log文件从7.40开始突然暴涨,因为 tempdb 0 M到 40G     tempdb 所 ...
    
			
    2. 
						
  2. JS中的函数和BOM
			
    文档注释:开头两个*.写在函数上方,在调用函数时, 可以看到文档中的描述信息:function aaa(){ } [函数的声明及调用] 1.函数的声明格式: function 函数名(参数1,参数2, ...
    
			
    3. 
						
  3. 《物联网框架ServerSuperIO教程》- 22.动态数据接口增加缓存，提高数据输出到OPCServer和（实时）数据库的效率
			
     22.1   概述及要解决的问题 设备驱动有DeviceDynamic接口,可以继承并增加新的实时数据属性,每次通讯完成后更新这些属性数据.原来是通过DeviceDynamic接口实体类反射的方式获 ...
    
			
    4. 
						
  4. Netty自娱自乐之协议栈设计
			
    ---恢复内容开始--- 俺工作已经一年又6个月了,想想过的真快,每天写业务,写业务,写业务.......然后就是祈祷着,这次上线不要出现线上bug.继续这每天无聊的增删改查,学习学习一下自己感兴趣的 ...
    
			
    5. 
						
  5. Java 强引用 软引用 弱引用 虚引用详解
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt393 众所周知,java中是JVM负责内存的分配和回收,这是它的优点(使用方 ...
    
			
    6. 
						
  6. NHibernate教程(20)——二级缓存（上）
			
    本节内容 引入 介绍NHibernate二级缓存 NHibernate二级缓存提供程序 实现NHibernate二级缓存 结语 引入 上一篇我介绍了NHibernate内置的一级缓存即ISession ...
    
			
    7. 
						
  7. Swing-JOptionPane对话框用法-入门
			
    对话框是GUI程序中常见的界面,通常用来反馈提示信息.告警或获取用户输入.比如这种: JOptionPane是Swing中的一个对话框类,它能够提供常见的绝大多数对话框效果,本文对这个类进行介绍.需要 ...
    
			
    8. 
						
  8. Swing-setAlignmentX()用法-入门
			
    先看下API: public void setAlignmentX(float alignmentX) 设置垂直对齐方式. 参数: alignmentX - 新的垂直对齐方式 网上关于这个函数的详细情 ...
    
			
    9. 
						
  9. 201521123038 《Java程序设计》 第四周学习总结
			
    201521123038 <Java程序设计> 第四周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.通过 ins ...
    
			
    10. 
						
  10. 201521123057 《Java程序设计》第4周学习总结
			
    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 答: 面向对象 ...
    
			
    11.