5、深入理解文档对象模型（DOM）

深入理解文档对象模型（DOM）

1. 什么是文档对象模型（DOM）

JavaScript 相较于基础 HTML 的一大优势在于，脚本能够操作网页文档及其内容。为了实现这一功能，JavaScript 使用了一种由父子对象构成的层次结构，即文档对象模型（DOM）。这些对象以树状结构组织，代表了网页文档的所有内容和组件。

1.1 DOM 的本质

DOM 并非 JavaScript 语言的一部分，而是内置于浏览器的应用程序编程接口（API）。虽然它常与 JavaScript 结合使用，但也能被其他语言（如 VBScript 和 Java）使用。

1.2 DOM 对象的属性和方法

DOM 中的对象具有属性（描述网页或文档的变量）和方法（用于操作网页部分的函数）。当引用一个对象时，需使用父对象名后跟子对象名，用点号分隔。例如， window.document.image9 表示窗口对象下文档对象的子对象 image9 。

1.3 DOM 对象层次结构

以下是部分 DOM 对象层次结构：

graph TD;
    window --> document;
    window --> history;
    window --> location;
    document --> links[];
    document --> anchors[];
    document --> images[];
    doc