DOM遍历

DOM遍历节点树

1,parentNode

DOM遍历

DOM遍历

2,childNodes,子节点们

DOM遍历

DOM遍历

之所以是7个,看一下节点类型

1,元素节点-------1

2,属性节点-------2

3,文本节点-------3

4,注释节点-------8,

5,document------9

6,DocumentFragment-------11

DOM遍历

灰色区域是第1个文本节点

DOM遍历

第二个是元素节点

DOM遍历

第三个是文本节点

以此类推,一共有7个节点,

3,firstChild,lastChild

第一个子节点和最后一个节点

DOM遍历

4,nextSibling,previousSibling

后一个兄弟节点,前一个兄弟节点

DOM遍历

DOM遍历

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

遍历元素节点树

1,parentElement (IE9以下不兼容)

DOM遍历

DOM遍历

2,children

DOM遍历

3,childElementCount === node.children.length 当前元素节点的子元素节点的个数 (IE9以下不兼容)

DOM遍历

4,firstElementChild,lastElementChild  (IE9以下不兼容)

返回第一个元素节点和最后元素节点

5,nextElementSibling / previousElementSibling (IE9以下不兼容)

返回后一个 / 前一个兄弟元素

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

节点的属性

1,nodeName

元素的标签名,只读

2,nodeValue

只有文本节点,和comment(注释)节点有,可读,可写

3,nodeType

节点的类型,只读

他返回的是一个数值,比如元素节点是1

DOM遍历

4,attributes

属性节点的内属性的集合

DOM遍历

DOM遍历

5,是一个方法 hasChileNodes() 

查看某一元素是否有节点

DOM遍历

DOM遍历

DOM遍历

DOM遍历

DOM遍历