小小子

一个HTML文档对应的DOM节点树形结构大致如图：

DOM HTML TREE(点击小图看大图)

The Node Of DOM

文档中不同的结构类型分别对应不同类型的DOM节点，在JavaScript中这些节点是作为实现了特定的Node接口的DOM对象来操作的。每个Node对象都有nodeType属性，这些属性指定节点的类型。

下表列出了HTML文档中常见的节点类型和它们的nodeType的值：

因为这些子接口都是继承自Node接口。下图将显示核心DOM API的部分类层次，以体现其继承关系。具体其常量是继承自哪个接口，大家注意看上表的第二列——节点类型常量：

PART OF DOM API(点击小图看大图)

DOM的通用属性和方法

DOM对象具有某些能用的属性和方法，其由Node接口定义。Node接口为了遍历和操作树定义了属性和方法。

1. 属性：

Node对象的childNodes属性将返回子节点的列表，firstChild、lastChild、nextSibling、previousSibling和parentNode其分别表示节点的第一个和最后一个儿子、前一个和后一个兄弟(可以理解为哥哥和弟弟)，以及父亲，它们提供了遍历树的方法。

2. 方法：

同时appendChild()、removeChild()、replaceChild()和insertBefore()方法使你能给文档添加或删除节点。

在后面的日志中我会具体介绍这些属性和方法的使用的。

attribute,元素的属性

用Element接口的getAttribute()方法、setAttribute()方法和removeAttribute()方法可以查询、设置并删除一个元素的属性。

虽然Node接口也提供了getAttributeNode()方法，但是用起来不够方便，其将返回一个表示属性和它的值的Attr对象，这里略过不讲。

下面的例子，我使用下面的方法来设置元素的属性，并且删除这个属性

在线演示地址

啰嗦和总结

这次咱不用“唠叨”这个词了。呵呵。咱用的是“啰嗦”。DOM这一系列日志会写几天，因为其很重要，小小子也是一边学，一边抄，一边写。之前总是对其一知半解，希望这次系统的记录这些日志会对其有深刻的印象。嗯。

PS:上面的图可是我自己画的哦，抄了书上的，也看了W3School的，总之尽量给大家留下些印象，呵呵。