zoukankan      html  css  js  c++  java
  • 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>

     
    孜孜不倦,必能求索;风尘仆仆,终有归途。
  • 相关阅读:
    蒟蒻Orion还要学的东西!
    一些技巧 && 常数优化 && 出现の错误 [绝赞更新中!]
    [US Open 2004][luogu2342] 叠积木 [带权并查集]
    省选算法学习·一些数列相关的数学知识 [数学]
    [BJOI2019] 奥术神杖 [取log+AC自动机+dp]
    [BJOI2019] 删数 [dp转贪心结论+线段树]
    [2018国家集训队][UOJ449] 喂鸽子 [dp+组合数学]
    [2018集训队作业][UOJ424] count [笛卡尔树+括号序列+折线法+组合数学]
    [2018集训队作业][UOJ450] 复读机 [DP+泰勒展开+单位根反演]
    [SDOI2014][BZOJ3533] 向量集 [线段树+凸包]
  • 原文地址:https://www.cnblogs.com/liyuspace/p/8983318.html
Copyright © 2011-2022 走看看