DOM的一个想法

让我们从下面的HTML开始学习吧:

<html>
  <head>
    <title>The title</title>
  </head>
  <body>
    The body
  </body>
</html>

DOM看起来如下：

DOM节点_DOM

DOM树

最顶层只有html节点，有两个子节点：head 和 body，其中head有子标签title。
HTML标签为DOM树中的元素节点，一些文本可以成为文本节点。它们俩都是节点，仅仅类型不一样。

// 修改<BODY>元素背景为红色
document.body.style.backgroundColor = 'red';

如果你运行了上面的代码，并且想恢复到默认风格：

document.body.style.backgroundColor = '';

我们还可以更改节点内容，检索节点，创建新的元素并把它们添加到文档中。
但我们需要先知道DOM的结构和DOM有哪些内容。

另一个文档

让我们看一个更加复杂的DOM文档

<!DOCTYPE HTML>
<html>
    <head>
        <title>The document</title>
    </head>
    <body>
        <div>Data</div>
        <ul>
            <li>Warning</li>
            <li></li>
        </ul>
        <div>Top Secret!</div>
    </body>
</html>

下面为我们展开后的文档树

DOM节点_DOM_02

DOM树2

使用开发工具查看DOM

我们可以很方便的使用浏览器开发工具查看DOM树。例如

  1. 打开DOM树2

  2. 打开FireBug, Chrome & IE或其他浏览器的开发工具

  3. 在FireBug或浏览器开发工具中定位到HTML标签。
    下图为从Chrome开发者工具中的截图，通常它和HTML标签布局一样。

    DOM节点_DOM_03

    截图

    *在开发者工具中显示的DOM树不是完整的。有一些元素是在DOM树中存在但开发者工具中不显示出来。

    空白节点

    现在让我们用图片来近距离介绍空白节点吧。空白符在HTML中被标识为文本并且是文本节点。这些文本节点不会显示在开发者工具当中，但它们确确实实存在的。

    DOM节点_DOM_04

    空白节点

    顺便说一下，注意到li节点没有任何空白节点。那是因为它不含任何节点。
    空白节点生成于两个节点之间。因此当我们消除标签间的空间时它也会消失。
    下面的代码不会生成空白节点。

    <!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>

    其他的节点类型

    DOCTYPE

    你留意到上面例子中的DOCTYPE吗？他没有在图片中显示出来，但它也是一个DOM节点，存在于HTML的最上头。
    DOCTYPE是__HTML__规格中的一部分，它还会指导Web浏览器当前页面中的文本标记的版本信息。

    注释

    注释也是一种节点：

    <html>
...
<!-- comment -->
...
</html>

    上面的注释也会保存到DOM树中，它由节点类型为注释，文本类型的内容组成。

    总结

    现在你已经了解了DOM的结构，它的布局，包含哪些节点。
    下一章节我们将讲解如何在JavaScript中遍历DOM。