JavaWeb自学笔记 DOM技术

DOM是Document Object Model(文档对象模型)的简称，是表示文档和访问，操作构成文档的各种元素的应用程序接口(API)。它提供了文档中独立元素的结构化，面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容，DOM也提供了处理事件的接口，它允许捕获和相应用户以及浏览器的动作，下面将对其进行详细介绍。

DOM的分层结构

在DOM中，文档的层次结构以树形结构表示，树是倒立的，树根在上，枝叶在下，树的节点表示文档中的内容，DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象对于HTML文档，表示文档根元素的Element对象是html标记，head和body元素是树的枝干。例如下图：

在树形结构中，直接位于一个节点之下的节点称为该节点的子节点(children)。直接位于一个节点之上的节点称为该节点的父节点(parent)。位于同一层次，具有相同父节点的节点是兄弟节点(sibling)。一个节点的下一个层次的节点集合是该节点的后代(descendant)。一个节点的父节点，祖父节点及其他所有位于它之上的节点都是该节点的祖先(ancestor)。

遍历文档

在DOM中，HTML文档中的各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形结构来说，最常做的就是遍历树。在DOM中，可以通过Node对象的parentNode，firstChild，nextChild，lastChild，previousSibling等属性来遍历文档树。Node对象的常用属性如下表：

由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型如下表：

获取文档中的指定元素

虽然通过遍历文档树中全部节点的方法可以找到文档中指定的元素，但是这种方式比较麻烦。下面介绍两种直接搜索文档中指定元素的方法。

通过元素id属性获取元素

使用Document对象的getElementById方法可以通过元素的id属性获取元素，例如，获取文档中id属性为userList的节点。代码如下：

document.getElementById("userList");

通过元素的name属性获取元素

使用Document对象的getElementsByName方法可以通过元素的name属性获取元素。与getElementById方法不同的是，该方法的返回值为一个数组，而不是一个元素。如果想通过name属性获取页面中唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name属性为userName的节点。代码如下：

document.getElementByName("username")[0];

操作文档

在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建，插入，删除和替换等操作。这些操作都可以通过节点(Node)对象提供的方法来完成，Node对象的常用方法如下表：