5、深入理解文档对象模型（DOM）-优快云博客

本文链接：https://blog.youkuaiyun.com/code8/article/details/155622855

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

1. 什么是DOM

JavaScript相较于基础HTML的一大优势在于，脚本能够操作网页文档及其内容。例如，脚本可以在浏览器中加载新页面、操作浏览器窗口和文档的各个部分、打开新窗口，甚至动态修改页面内的文本。

为了实现这些功能，JavaScript使用了一种被称为文档对象模型（Document Object Model，简称DOM）的父子对象层次结构。这些对象以树状结构组织，代表了网页文档的所有内容和组件。

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

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

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

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    wind