文档结构

你可以将 HTML 文件想象成一系列嵌套的箱子。诸如<body>和</body>之类的标签会将其他标签包围起来，而包含在内部的标签也可以包含其他的标签和文本。这里给出上一章中已经介绍过的示例文件。

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>My home page</title>
  5.   </head>
  6.   <body>
  7.     <h1>My home page</h1>
  8.     <p>Hello, I am Marijn and this is my home page.</p>
  9.     <p>I also wrote a book! Read it
  10.       <a href="http://eloquentjavascript.net">here</a>.</p>
  11.   </body>
  12. </html>

该页面结构如下所示。

文档结构 - 图1

浏览器使用与该形状对应的数据结构来表示文档。每个盒子都是一个对象，我们可以和这些对象交互，找出其中包含的盒子与文本。我们将这种表示方式称为文档对象模型（Document Object Model），或简称 DOM。

我们可以通过全局绑定document来访问这些对象。该对象的documentElement属性引用了<html>标签对象。由于每个 HTML 文档都有一个头部和一个主体，它还具有head和body属性，指向这些元素。