DOM对象中的Node和Element的区别

2016-08-09

DOM对象

根据JS中DOM对象的描述，DOM内部分为Node和Element，并且放入了两个不同的数组 childNodes 和 children

......

childElementCount:0     <==== 内部的元素
childNodes:NodeList[1]  <==== 内部的节点
children:HTMLCollection[0]

......

firstChild:text         <==== 标签内部有文本
firstElementChild:null  <==== 该项为null表示标签内部不再有<>元素

什么是Node什么是Element

只要是有字符空间存在(哪怕是空字符)就是Node，带有<>标签标记的才是Element,Node里包括Element

如何计算Node和Element

假设存在一个DOM对象,它有几个Node和几个Element呢

<div>
  Text
  <span>
    SpanText
  </span>
</div>

div中有3个Node ＝文本Text是Node[0]，span标签是Node[1]
第三个Node在span结束标签和div结束标签之间，虽然是空字符，但是有空间，所以是Node[2]
div中有1个Element ＝ span标签Element[0]

所以说div的各种属性是

标签	childElementCount	childNodes	children
div	1	NodeList[3]	HTMLCollection[1]

span中有1个Node ＝文本SpanText是Node[0]
span里没有Element了，因为不包含任何标签

所以说span的各种属性是

标签	childElementCount	childNodes	children
span	0	NodeList[1]	HTMLCollection[0]

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true