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

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

bbb

aaa

aaa

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

赞 (0)

相关推荐

  • JS中用childNodes获取子元素换行会产生一个子元素

    JS中用childNodes获取子元素换行会产生一个子元素 <div id='div1'> <div id='div2'> <div id='div3'></div> </div> <div class='div2'> </div> </div> 这样的代码 $('#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNo

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • Javascript中找到子元素在父元素内相对位置的代码

    经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

  • js判断一个元素是否为另一个元素的子元素的代码

    当然方法有很多,不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一. 废话少说直接上方法: 复制代码 代码如下: function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ if (obj == parentObj){ return true; } obj = obj.parentN

  • JavaScript操作DOM元素的childNodes和children区别

    对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

  • js与jquery获取父元素,删除子元素的两种不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法  for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法  $("#id").each

  • javascript中parentNode,childNodes,children的应用详解

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy

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

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • JS中JSON对象和String之间的互转及处理技巧

    JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已. 如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/ 1.在javascript中新建一个字符串(JSON文本). var txt = '{ "employees" : [' + '{ "firstName":"Bill"

  • 详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    如下所示: 1.index.html文件入口: 2.src放置组件和入口文件: 3.node_modules为依赖的模块: 4.cofig中配置了路径端口值等: 5.build中配置了webback的基本配置.开发环境配置.生产环境配置等. main.js是我们的入口文件,主要用于初始化vue实例,并使用需要的插件. App.vue是我们的主组件,所有的页面都在App.vue下进行切换.我们可以将router标示为App.vue的子组件. 6.在每个模板中给style设置一个scoped属性,意

  • JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

    本文实例讲述了JS箭头函数和常规函数之间的区别.分享给大家供大家参考,具体如下: 在 JavaScript 中,你可以通过多种方式去定义函数. 第一种常用的方法是使用关键字 function: // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代码中的函数声明和函数表达式被称为"常规函数". 从

  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    目录 1.框架 2.简单介绍 3.代码演示 4.演示break 1.框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> </script> </body> </html> 2.简单介绍 1.在javascr

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

  • Java中List Set和Map之间的区别_动力节点Java学院整理

    Java集合的主要分为三种类型: • Set(集) • List(列表) • Map(映射) 要深入理解集合首先要了解下我们熟悉的数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),而JAVA集合可以存储和操作数目不固定的一组数据. 所有的JAVA集合都位于 java.util包中! JAVA集合只能存放引用类型的的数据,不能存放基本数据类型. 世间上本来没有集合,(只有数组参考C语言)但有人想要,所以有了集合 有人想有可以自动扩展的数组,所以有了List 有的

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • js中let和var定义变量的区别

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

随机推荐