文档结构

你可以将 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 文档都有一个头部和一个主体,它还具有headbody属性,指向这些元素。