parentNode,parentElement,childNodes,children之间的区别

parentElement 获取对象层次中的父对象。  
parentNode 获取文档层次中的父对象。  
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。  
children 获取作为对象直接后代的 DHTML 对象的集合。 

parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。 
这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。 
要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。

--------------------------------------------------------

parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持

--------------------------------------------------------

用这parentNode,childNodes 2个就行了.楼上的都是正解!

--------------------------------------------------------

只是标准不一样吗?

--------------------------------------------------------

这个不是“标准不一样”, 
另外两个根本就不是标准, 
可以理解为ie自定义的

--------------------------------------------------------

也就是说parentElement、children是IE自家的东西,别的地方是不认的。 
那么,他们的标准版就是parentNode,childNodes。 
这两个的作用和parentElement、children是一样的,并且是标准的、通用的。

--------------------------------------------------------

以下是简单的解释,注意个别字的差异: 
parentNode Property: Retrieves the parent object in the document hierarchy. 

parentElement Property:Retrieves the parent object in the object hierarchy.

childNodes: 
Retrieves a collection of HTML Elements and TextNode objects that are direct descendants of the specified object.

children: 
Retrieves a collection of DHTML Objects that are direct descendants of the object.

--------------------------------------------------------

我也从dhtml手册里拿了两段^_^ 
parentElement children: 
There is no public standard that applies to this property/collection. 
parentNode childNodes: 
This property/collection is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 .

很多W3C标准从IE5才开始支持 
IE4以前的只能用ie自己的方法 

 

 代码如下:

<div id="test1">  

bbb<div>aaa</div>  

<div>aaa</div>  

</div>  

<script>  

alert(document.getElementById("test1").childNodes.length);  

alert(document.getElementById("test1").children.length);  

</script>

 
posted @ 2018-05-03 00:13  Fairyspace  阅读(1112)  评论(0编辑  收藏  举报