关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。

Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有:

节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

  更多节点类型参考:https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

  Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。

  以上就是Element跟Node的区别。

  那么用document.getElementById("xxx")取到的是Node还是Element呢?我们来测试一下:

Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外Element扩展了Node,Element拥有id、class、children等属性。

  以上就是Element跟Node的区别。

  那么用document.getElementById("xxx")取到的是Node还是Element呢?我们来测试一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="test">
<p>One</p>
<P>Two</p>
</div>
<script>
var oDiv=document.getElementById("test");
console.log(oDiv instanceof Node); //true
console.log(oDiv instanceof Element); //true
</script>
</body>
</html>

我们可以看到用document.getElementById("xxx")取到的既是Element也是Node

  children是Element的属性,childNodes是Node的属性,我们再来测试一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="test">
<p>One</p>
<P>Two</p>
</div>
<script>
var oDiv=document.getElementById("test");
console.log(oDiv.children[0] instanceof Node); //true
console.log(oDiv.children[0] instanceof Element); //true console.log(oDiv.childNodes[0] instanceof Node); //true
console.log(oDiv.childNodes[0] instanceof Element); //false console.log(typeof oDiv.childNodes[0].children); //undefined
console.log(typeof oDiv.childNodes[0].childNodes); //object
</script>
</body>
</html>

  通过上面的代码我们可以看到,Element的children[0]仍为Element,是Node和Element的实例,Node的childNdoes[0]为Node,只是Node的实例,不是Element的实例。

  同时,Node的children属性为为undefined

JavaScript中Element与Node的区别,children与childNodes的区别的更多相关文章

  1. 一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

    JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...

  2. 【转】javascript中not defined、undefined、null以及NaN的区别

    原文链接(点击跳转) 第一:not defined 演示代码:   <span style="font-size:12px;"><span style=" ...

  3. JavaScript中的bind,call和apply函数的用法和区别

    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...

  4. children和childNodes的区别

    children和childNodes 1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当no ...

  5. javascript中的两个定时函数setTimeOut()和setInterVal()的区别

    js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...

  6. children 和childNodes 的区别

    1:childNodes /children相同点:它返回指定元素的子元素集合. 2:区别:children :  它是非标准的,仅返回HTML节点.甚至不返回文本节点.所有浏览器表现一 致. chi ...

  7. children和childNodes 的区别

    1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...

  8. java和javascript中this区别的浅探讨

    今天在学习javascript的时候碰到了this,感觉它跟java里的有点不一样.然后上网查了一下,参考了这篇文章,JavaScript中this关键字详解,发现它们之间的区别主要是这样: java ...

  9. JavaScript中‘==’和'==='的区别

    javascript中,两个等号‘==’和三个等号‘===’的区别: 简单说,‘===’比‘==’对相等的概念更为严格,使用‘==’时,数字 1 和 字符串 “1” 是相等的: 而使用‘===’时,数 ...

随机推荐

  1. 牛 JQuery视频笔记

    QX3GLL 包装集 next() nextAll() nextAll("div"); prev();prevAll() end();andSlf(); eq(2);gt(1);l ...

  2. C#编程使用Managed Wifi API连接无线SSID

    C#编程使用Managed Wifi API连接无线SSIDhttp://www.2cto.com/kf/201307/227623.html Managed Wifi API - Homehttp: ...

  3. window内存管理与内存原理

    转自: http://blog.csdn.net/iamfranter/article/details/6826270 WIndows为每个进程分配了4GB的虚拟地址空间,让每个进程都认为自己拥有4G ...

  4. HDU 5151 Sit sit sit 区间DP + 排列组合

    Sit sit sit 问题描述 在一个XX大学中有NN张椅子排成一排,椅子上都没有人,每张椅子都有颜色,分别为蓝色或者红色. 接下来依次来了NN个学生,标号依次为1,2,3,...,N. 对于每个学 ...

  5. SSH 使用JUnit测试

    前提是引入两个包:org.springframework.test-3.1.3.RELEASE和JUnit4. package com.qk.test; import javax.annotation ...

  6. Axis学习的第一天

    下载axis的相关工程包: 选中这2个文件下载: 1)axis-bin-1.4.zip 含有axis工程包,将工程包复制到tomcat里的webapps目录下: 2)axis-src-1.4.zip ...

  7. ubuntu下如何快速加密可移动存储设备

    ubuntu下可以快速加密U盘和其他移动存储设备.访问的时候会要你输入密码,这样就比较安全了. ubuntu的磁盘工具使用的是LUKS加密,虽然这个加密方法不跟其他系统兼容,但可以在其他试用GNOME ...

  8. 统计MySQL数据表大小

    SELECT CONCAT(TRUNCATE(SUM(data_length)/1024/1024,2),'MB') AS data_size,CONCAT(TRUNCATE(SUM(max_data ...

  9. 输出1到最大n位数之间的所有数

    比如 n = 2 那么从1一直输出到99 分析 直接输出,遇到大数时肯定有问题,比如n=100,存储100位的数据类型不存在. 可以利用数组来存储大数,比如n=100,可以开辟个数组 char a[1 ...

  10. 数值的整数次方(剑指offer面试题11)

    实现函数 double Power(double base, int exponent),即乘方运算. 考虑问题 exponet < 0 , 可以转化为 1.0 / Power(base, -1 ...