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

 更新时间:2013年11月26日 09:08:39   作者:  
这篇文章主要是对Js中parentNode,parentElement,childNodes,children的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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

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

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自己的方法

============================================


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

看见没有,这里的这个bbb,影响了结果

相关文章

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-04-04
  • js轮播图之旋转木马效果

    js轮播图之旋转木马效果

    这篇文章主要为大家详细介绍了js轮播图之旋转木马效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript每日必学之封装

    javascript每日必学之封装

    javascript每日必学之封装,介绍了有关封装的相关内容,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 自己的js工具 Event封装

    自己的js工具 Event封装

    说到浏览器中的event,相信不少人都很头疼,ie的event大部分时候都可以获取到
    2009-08-08
  • require.js 加载过程与使用方法介绍

    require.js 加载过程与使用方法介绍

    require.js是javascript模块化编程中常用的一个JS库。这篇文章主要介绍了require.js 加载过程与使用方法,需要的朋友可以参考下
    2018-10-10
  • JS eval代码快速解密实例解析

    JS eval代码快速解密实例解析

    这篇文章主要介绍了JS eval代码快速解密实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JS文本获得焦点清除文本文字的示例代码

    JS文本获得焦点清除文本文字的示例代码

    本篇文章主要是对JS文本获得焦点清除文本文字的示例代码进行介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript实现shuffle数组洗牌操作示例

    JavaScript实现shuffle数组洗牌操作示例

    这篇文章主要介绍了JavaScript实现shuffle数组洗牌操作,结合实例形式分析了javascript数组的定义、构造、排序等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 微信小程序swiper使用网络图片不显示问题解决

    微信小程序swiper使用网络图片不显示问题解决

    这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法

    本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法,具有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12

最新评论