关于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. HDU 4597 Play Game(记忆化搜索，深搜)

    题目 //传说中的记忆化搜索,好吧,就是用深搜//多做题吧,,这个解法是搜来的,蛮好理解的 //题目大意:给出两堆牌,只能从最上和最下取,然后两个人轮流取,都按照自己最优的策略,//问说第一个人对多的 ...

  2. POJ 2689 Prime Distance （素数筛选法，大区间筛选）

    题意:给出一个区间[L,U],找出区间里相邻的距离最近的两个素数和距离最远的两个素数. 用素数筛选法.所有小于U的数,如果是合数,必定是某个因子(2到sqrt(U)间的素数)的倍数.由于sqrt(U) ...

  3. SPL 全面剖析

    SPL 全面剖析 来自百度百科 http://baike.baidu.com/view/1130234.htm?fr=aladdin SPL(Standard PHP Library) IN PHP5 ...

  4. css系列-段落首字符下沉、缩进及特殊显示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HDU 1698 Just a Hook （线段树区间更新）

    题目链接 题意 : 一个有n段长的金属棍,开始都涂上铜,分段涂成别的,金的值是3,银的值是2,铜的值是1,然后问你最后这n段总共的值是多少. 思路 : 线段树的区间更新.可以理解为线段树成段更新的模板 ...

  6. 2014多校第三场1005 || HDU 4891 The Great Pan（模拟）

    题目链接 题意 : 给你n行字符串,问你有多少种理解方式.有两大类的理解 (1){A|B|C|D|...}代表着理解方式可以是A,可以是B或C或者D. (2)$blah blah$,在$$这两个符号中 ...

  7. arcgis地图操作的资料URL，以供以后查阅

    更改Arcgis Web应用程序的端口号8399: http://help.arcgis.com/zh-cn/arcgisserver/10.0/help/arcgis_server_java_hel ...

  8. Windows 代码实现关机(直接黑屏)

    整理资料的时候发现的以前的代码,本机Win7 x64 Sp1 运行直接关机,黑屏.就是利用RtlAdjustPrivilege函数提权,代码中的注释写的很详细了.用的VS2010写的,直接编译成x64 ...

  9. eq相等 ,ne、neq不相等 EL表达式

    eq相等,ne.neq不相等, gt大于, lt小于 gte.ge大于等于   lte.le 小于等于   not非   mod求模   is [not] div by是否能被某数整除   is [n ...

  10. P2P金融

    P2P金融又叫P2P信贷,是互联网金融(ITFIN)的一种.意思是:点对点. P2P金融指不同的网络节点之间的小额借贷交易(一般指个人),需要借助电子商务专业网络平台帮助借贷双方确立借贷关系并完成相关 ...