DOM 是 javaScript 与 HTML 页面进行对话的接口

一、概述

文档对象模型，我有个有趣的记忆：文档即 HTML 文档, 对象提供了属性和方法，模型即使用属性和方法去操作 HTML 文档，操作是指 增删改查 DOM 节点。

DOM 是 javaScript 与 HTML 页面进行对话的接口，JavaScript 可以通过 DOM 接口对 HTML 页面中的各个元素进行操作。

在《BOM 对象和 DOM 对象》一文中我们提到了BOM，那么 BOM 就是 JavaScript 和浏览器对象进行对话的接口，我们真正在使用的时候浏览器是五花八门的，那如果想要使你的 JavaScript 代码可以在不同的浏览器上显示相同的行为，那就必须定义一个JavaScript和浏览器对象对话的接口，这个接口就是BOM，而BOM中定义的对象就是Window，所有浏览器都支持 window 对象。它表示浏览器窗口。也就是说你在JavaScript中对window对象的操作，不管你在任何浏览器中都会执行相同的操作（因为所有的浏览器都支持window对象的相同的方法和属性）

不过，本文主要讲解 DOM

二、文档对象模型概念

文档对象模型，英文 Document Object Model, 简称 DOM，是HTML和XML文档的编程接口。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。

这段话来自 mozilla web docs 中的 DOM 概述, 听起来还是有点蒙。我来提炼一下：

DOM 是一个 API
DOM 可以为 HTML 文档提供 API()
浏览器解析 HTML 文档生成 DOM节点树，这点可以看看浏览器工作原理详解

为了理解 文档对象模型, 我们先来缕缕上文提到的 HTML 和 XML, 这两种标记语言（Markup Language）

三、HTML 与 XML 两种标记语言

HTML 被设计用来显示数据，XML 被设计用来传输和存储数据。

事实上，XML 的数据格式已经被 JSON 的数据格式所取代，尤其是 WEB 系统，已经很少看见后端给前端传递的数据是 XML 格式的了。

3.1、HTML

2.1.1、什么是 HTML

HTML 是 HyperText Markup Language 的英文简称，翻译过来就是 超文本标记语言, 维基百科里有它的概念描述，从中我们了解到：

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

值得一提的是， 2014年10月28日，HTML5作为稳定W3C推荐标准发布，这意味着HTML5的标准化已经完成。

3.1.2、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3.1.3、HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

3.1.4、HTML中的节点

根节点：<html>元素
元素节点：所有HTML元素，比如body、title
属性节点：所有HTML属性，比如align、id
文本节点：插入到HTML元素中的文本，比如<a>text</a>
注释节点：HTML文档中的注释，比如
3.2、XML

XML 是 Extensible Markup Language 的简称，即可扩展标记语言。
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准

3.2.1、HTML 与 XML 比较

XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
3.2.2、XML 仅仅是纯文本

XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。

四、HTML 与 DOM树

浏览器解析HTML文档中的 HTML 标签生成 DOM 树，此后 HTML中的每个标签元素、属性、样式、文本都能看做是DOM树中的一个节点，JavaScript 都能通过 DOM 提供的编程接口操作到每个节点.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>
    <div>
        <a href="www.baidu.com">百度</a>
    </div>
</body>
</html>

对应的DOM树结构图：

五、JavaScript 操作 DOM

上一部分我们了解到 JavaScript 可以通过 DOM 提供的编程接口操作到每个DOM节点，而JavaScript 操作 DOM 主要是 增删改查 DOM 节点

5.1、增

5.1.1、创建新节点

document.createElement("h3")，创建一个html元素，这里以创建 h3 元素为例
document.createTextNode(String)，创建一个文本节点；
document.createAttribute("class")，创建一个属性节点，这里以创建class属性为例
5.1.2、给某个节点增加子节点
element.appendChild(Node) 往 element 内部最后面添加一个节点，参数是节点类型
elelment.insertBefore(newNode,existingNode) 在 element 内部中在existingNode前面插入newNode
5.2、删
element.removeChild(Node)，删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
5.3、改

改，主要是更改某个节点的属性值
element.getAttribute(attributeName)，括号传入属性名，返回对应属性的属性值
element.setAttribute(attributeName,attributeValue)，传入属性名及设置的值
5.4、查
document.getElementById(idName)，通过id号来获取元素，返回一个元素对象
document.getElementsByName(name)，通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className)，通过class来获取元素，返回元素对象数组（ie8以上才有）
document.getElementsByTagName(tagName)，通过标签名获取元素，返回元素对象数组

六、浏览器干了啥

JavaScript 对 DOM 的增删改操作后，会引起浏览器的 reflow(回流) 或 repaint(重绘) 操作，而 reflow 和 repaint 会引发浏览器性能问题，其中 reflow 的成本比 repaint 的成本高得多的多。因此：

避免在循环中操作DOM
将DOM引用赋给本地变量，然后操作本地变量

图为 Mozilla 的 Gecko 渲染引擎主流程

想了解更多 reflow 和 repaint 可以移步《浏览器的 reflow 和 repaint》

felix-cao / Blog