html dom 数据组,HTML DOM

HTML DOM 节点关系

1.节点关系图

假设html代码如实例中，那么各个元素节点的关系如下:

d1 d2 d3 的parentNode是parentDiv

parentDiv的firstNode是 d1

parentDiv的lastNode是d3

d2的previousSibling是d1

d2的nextSibling是d3

parentDiv的children是 d1 d2 d3

2.父节点关系

通过parentNode获取父节点。

本例中从id=d1的div开始递归获取其父节点，分别获取如下父节点

DIV[id=parentDiv] -> body->html->document

3.同胞节点关系

分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点。

在本例中，首先获取d2元素节点

通过previousSibling获取前一个节点d1.

注意 d1和d2标签是紧挨着的，所以d2前一个节点时d1。

通过nextSibling 获取后一个节点#text.

注意 d2和d3不是紧挨着 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.

4.子节点关系

子节点关系有:

firstChild 第一个子节点

lastChild 最后一个子节点

childNodes 所有子节点

注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点

注:lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着，所以最后一个子节点就是第三个标签

注: 子元素个数一共是6个。 因为parentDiv的子节点是 文本节点接着一个元素节点，重复3次。 所以一共是6个。

5.childNodes和children的区别

childNodes和children都可以获取一个元素节点的子节点。

childNodes 会包含文本节点

children 会排除文本节点