js之DOM简介

偏执的太偏执、 2022-11-22 12:48 138阅读 0赞

# 1 什么是 DOM #

1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。

2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

## 2 DOM 的组成 ##

1）**核心DOM** - 针对任何结构化文档的标准模型。

2）**XML DOM** - 针对 XML 文档的标准模型。

3）**HTML DOM** - 针对 HTML 文档的标准模型。

## 3 DOM 分级（DOM的发展版本） ##

### DOM0 ###

本没有DOM0，习惯上把未形成标准的试验性质的初级阶段的DOM称为`DOM0`，即：`第0级DOM`。

### DOM1 ###

W3C 于1998年10月完成了第一级 DOM，即：`DOM1`。

`DOM1` 级主要定义了HTML和XML文档的底层结构。在`DOM1` 中，DOM由两个模块组成：`DOM Core`（DOM核心）和 `DOM HTML`。其中，`DOM Core` 规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。`DOM HTML` 则在 DOM 核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的 `Document` 对象。

### DOM2 ###

在 `DOM1` 的基础上 `DOM2` 和 `DOM3` 引入了更多的交互能力，也支持了更高级的XML特性。`DOM2` 和 `DOM3` 将 DOM 分为更多具有联系的模块。DOM2 级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块，而且通过对象接口增加了对CSS的支持。DOM1 级中的 DOM 核心模块也经过扩展开始支持XML命名空间。在 DOM2 中引入了下列模块，在模块包含了众多新类型和新接口：

*  `DOM视图`（DOM Views）：定义了跟踪不同文档视图的接口。
 *  `DOM事件`（DOM Events）：定义了事件和事件处理的接口。
 *  `DOM样式`（DOM Style）：定义了基于CSS为元素应用样式的接口。
 *  `DOM遍历和范围`（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

### DOM3 ###

DOM3进一步扩展了DOM，在 DOM3 中引入了以下模块：

*  `DOM加载和保存模块`（DOM Load and Save）：引入了以统一方式加载和保存文档的方法。
 *  `DOM验证模块`（DOM Validation）：定义了验证文档的方法。
 *  `DOM核心的扩展`（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base

## 4 DOM 树 ##

![2cb1778f5baec67cae7a1bbf5032bf4a.png][]

## 5 节点 Node ##

文档中的每一个部分都是节点,包括document 元素 属性 文本...

### 5.1 节点分类 ###

*  document 文档节点
 *  elementNode 元素节点
 *  attributeNode 属性节点
 *  textNode 文本节点
 *  commentNode 注释节点

### 5.2 节点属性 ###

*  nodeName 节点名 元素节点通过nodeName可以获取标签名
 *  nodeValue 节点值
 *  nodeType 节点类型 值是数字： document（9） element(1) attribute(2) text(3) comment(8)

[2cb1778f5baec67cae7a1bbf5032bf4a.png]: /images/20221120/93fa7825f75d4555ae152442b3952607.png