DOM 简介 | 深入了解DOM

目录

一、DOM是什么

二、DOM的访问

三、DOM节点类型

四、DOM的分级

---

今天我们将了解WEB编程中一个重要的概念DOM（Document Object Model）文档对象模型，它帮助我们使用JavaScript（或其他编程语言）操纵文档。

一、DOM是什么

很多人会问 DOM 具体是什么东西呢？其实，DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示，它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象，并提供了一些属性和方法来描述它们。

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。DOM 是文档对象模型（document object model）的缩写，它是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。

DOM是W3C的标准。它被分为3个部分：

• 核心DOM：针对任何结构化文档的标准模型
• XML DOM：针对XML文档的标准模型
• HTML DOM：针对HTML文档的标准模型

核心DOM：是用于XML与HTML的共用接口；XMLDOM：XML专用接口；HTML DOM：HTML专用接口；

DOM不是一种编程语言，它是一种标准，一个模型，它与编程语言相对独立。编程语言都可以按照这种模型实现对文档的访问和处理。

注：因为我们主要是学习WEB编程，所以接下来文章中即将提到的DOM均指HTML DOM，使用到的DOM API也均是JavaScript脚本语言实现。

二、DOM的访问

我们知道，各个浏览器对JavaScript都有不同的实现，所以它们在实现DOM标准时，也会有一些差异，但它们既然都遵循了该标准，所以又呈现出了不同程度一致性。我们在使用DOM时，并不需要做任何特别的操作，如果碰到有差异的地方（主要体现在方法名称和参数上），只需根据不同浏览器使用他们各自实现的相关方法即可。实际上他们的实现都遵循了统一标准。

DOM把文档视做树结构：

• 整个文档是一个文档节点。
• 每个 HTML 标签是一个元素节点。
• 包含在 HTML 元素中的文本是文本节点。
• 每一个 HTML 属性是一个属性节点。
• 注释属于注释节点。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

通过这个节点树，JavaScript可以轻松的访问并操作这些节点。Javascript获取到的每个节点都被解析成对象，遭DOM中，document是顶级对象，DOM元素的属性和方法大都源于此。

◼️ 举个栗子：请看下面这个HTML文档：

  
    
  
  
    
DOM Lesson one
    
Hello world!
  

上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。举例，和 的父节点是 节点，文本节点 "Hello world!" 的父节点是

节点。

大部分元素节点都有子节点。比方说，节点有一个子节点：