【EASYDOM系列教程】之 DOM 元素树

摘要：元素之间的关系在元素树结构中，主要具有以下三层关系。祖先与后代如果我们将页面中某一个元素作为祖先的话，那包含在该元素内的所有元素除子级之外的都可以称为该元素的后代。兄弟关系具有相同父级元素的两个或几个元素之间就是兄弟关系。

DOM 元素树结构与 DOM 节点树结构很相似，区别仅在于是利用节点解析 HTML 元素，还是利用元素解析 HTML 元素。

还记得下面这张图吗?

上图中的 HTML 页面源代码如下:

    
    


这是一个示例页面
这是一个段落内容.

DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式，是因为 DOM 将 HTML 页面解析为一个 树结构。

上述 HTML 页面示例代码，如果利用节点方式解析为 DOM 节点树结构 的话，如下所示:

如果利用元素方式解析为 DOM 元素树结构 的话，如下所示:

通过上图所示，我们发现 DOM 元素树结构与 DOM 节点树结构类似，同样在元素之间存在着某些固定的关系。

在 DOM 元素树结构中，主要具有以下三层关系。

如果我们将 HTML 页面中某一个元素作为父级的话，那包含在该元素内的第一层所有元素都可以称为该元素的子级。

例如，我们来看一下下面这个 DOM 元素树结构:

在上面的 DOM 节点树结构中， 元素作为父级， 和 元素作为子级。

如果我们将 HTML 页面中某一个元素作为祖先的话，那包含在该元素内的所有元素（除子级之外的）都可以称为该元素的后代。

例如，我们来看一下下面这个 DOM 元素树结构:

在上面的 DOM 节点树结构中， 元素作为祖先，、