srcmini上一章JavaScript教程请查看：JS对象object
在本教程中，你将学习文档对象模型(DOM)的概念。
理解文档对象模型
文档对象模型(DOM)是一种独立于平台和语言的模型，用于表示HTML或XML文档，它定义了文档的逻辑结构以及应用程序访问和操作文档的方式。
在DOM中，文档的所有部分，如元素、属性、文本等都组织在一个层次树状结构中；类似于现实生活中由父母和孩子组成的家谱，在DOM术语中，文档的这些单独部分称为节点。
表示HTML文档的文档对象模型称为HTML DOM。类似地，表示XML文档的DOM称为XML DOM。
在本章中，我们将介绍HTML DOM，它提供了通过JavaScript访问和操作HTML文档的标准接口。使用HTML DOM，你可以使用JavaScript来构建HTML文档、导航它们的层次结构、添加、修改或删除元素和属性或它们的内容，等等。在HTML DOM的帮助下，几乎可以使用JavaScript访问、更改、删除或添加HTML文档中的任何内容。
为了更清楚地理解这一点，让我们考虑以下简单的HTML文档:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Mobile OS</h1>
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</body>
</html>上述HTML文档可以用下面的DOM树表示：
上面的关系图演示了节点之间的父/子关系。文档节点是DOM树的根节点，它有一个子节点<html>元素，而<head>和<body>元素是<html>父节点的子节点。
<head>和<body>元素也是同级元素。此外，元素中的文本内容是父元素的子节点。例如，“Mobile OS”被认为是包含它的<h1>的子节点，等等。
HTML文档中的注释也是DOM树中的节点，即使它不会以任何方式影响文档的可视表示。注释对于记录代码非常有用，但是你很少需要检索和操作它们。
诸如id、class、title、style等HTML属性也被认为是DOM层次结构中的节点，但是它们不像其他节点那样参与父/子关系，它们作为包含它们的元素节点的属性被访问。
HTML文档中的每个元素(如图像、超链接、表单、按钮、标题、段落等)都使用DOM层次结构中的JavaScript对象表示，每个对象都包含描述和操作这些对象的属性和方法。例如，可以使用DOM元素的style属性来获取或设置元素的内联样式。
在接下来的几章中，我们将学习如何访问web页面上的各个元素并对它们进行操作，例如，使用JavaScript程序更改它们的样式、内容等。
提示：实际上，文档对象模型或DOM基本上是浏览器和当前Web文档(HTML或XML)的各种组件的表示，可以使用脚本语言(如JavaScript)访问或操作这些组件。
评论前必须登录！
注册