JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

DOM的概念

DOM是“ Document Object Model ”的缩写,简称“ 文档对象模型 ”,由 W3C 制定规范。

DOM定义了 JavaScript 操作HTML文档的接口,提供了访问HTML文档(如body、form、div、textarea等)的途径以及操作方法。

DOM 以“ 树结构 ”来表达 HTML 文档。通过 JavaScript,可以重构整个 HTML 文档,可以添加、移除、改变或重排页面上的内容。

要改变HTML文档的某项内容,JavaScript 就需要获得访问HTML文档的入口。这个入口,连同HTML元素以及对 HTML 元素的添加、移动、改变或移除的操作,都是通过DOM来获得的。

对于JavaScript,HTML文档的每一项内容(HTML标签、标签属性、标签内的文字、空格或tab 等)都是一个对象。HTML文档的标签是一层层嵌套的,最外面的一层是<html>,文档对象模型(DOM)也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是document对象,可以理解为整个HTML文档,也是HTML文档的入口。树根之下(这棵树的图通常是倒着画,就好像遗传谱系或者家谱那样,树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟的关系。

在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每项HTML文档的内容都可以被确切地定位。文档对象模型(DOM)把整个HTML文档组织成这样的一个树状的结构,树结构中的每一项内容都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。

W3C已经给文档对象模型(DOM)制定了一系列标准,并且正在制定更多的相关标准。现代浏览器除支持其中的一部分标准之外,还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说,现代浏览器使用的技术历史由来纷繁复杂,有些人们普遍使用的DOM技术并无标准可依。

先来看一下下面的HTML代码:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> First Page!</title>
</head>
<body>
    <h1>Test!</h1>
    <!--NOTE!-->
    <p>Welcome to<em> DOM </em>World! </p>
    <ul>
        <li>Newer</li>
    </ul>
</body>
</html>

文档载入浏览器后,根据DOM规范,将其以“ 树 ”的形式表示出来。