前端复习之DOM

学习笔记
,

DOM，Document Object Model,即文档对象模型，是HTML和XML文档的一个操作接口。通过DOM，JavaScript可以获取和操作文档上的所有元素。

DOM是什么

BOM中曾提到，浏览器在页面初始化时，会在内存创建一个全局对象，即window对象，用来描述当前窗口的信息。window对象下回有6大核心模块，其中document模块即文档对象，它用来描述HTML/XML文档的内容。

浏览器解析HTML/XML文档的方式是将HTML和XML文档中的每个元素/属性/文本等映射成一个节点，节点之间存在层级关系，因此，整个文档被解析完成后，会生成一个由不同节点组成的树状结构，这个树状结构被称为DOM树。document对象就用来描述DOM树的状态和属性，同时也提供操作DOM的API。

DOM树示例：

DOM HTML tree

DOM是一个W3C标准，它定义了如何操作文档的标准。它允许代码动态地获取和更新文档的内容、结构和样式。

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

W3C DOM标准包括3个不同的部分：

  • 核心DOM（Core DOM）：所有文档类型的标准模型
  • XML DOM：XML文档的标准模型
  • HTML DOM：HTML文档的标准模型

其中，HTML DOM是HTML文档的标准对象模型和操作接口，它定义了：

  • HTML元素均为对象
  • HTML元素的属性
  • 操作HTML元素的方法
  • HTML元素的事件

通过HTML DOM，JavaScript可以动态地对HTML进行如下操作：

  • 添加、修改和移除页面中HTML元素和属性
  • 修改页面中的CSS样式
  • 实现事件交互
  • 增加新的事件

DOM的层级

DOM0

早期JavaScript版本中提供了操作Web文档的API，如图像和表单，我们可以通过这样的方法访问第一张图片或名为”user”的表单：

1
2
document.images[0];
document.forms["user"];

这实际上是未形成标准的实验性质的初级阶段DOM，习惯上被称为DOM0，它出现在W3C进行标准化之前，即没有形成真正的标准。

1997年6月和10月，Netscape Navigator 4和IE 4分别发布，这两种浏览器都大幅扩展了DOM，使JavaScript的功能大大增加，此时随之出现一个新的名词：DHTML。

DHTML即Dynamic HTML（动态HTML）。它不是一项新技术，而是将HTML，CSS，JavaScript技术组合的一种描述。它可以

  • 利用HTML把网页标记为各种元素
  • 利用CSS设置元素样式及其显示位置
  • 利用JavaScript操控页面元素和样式

利用DHTML，看起来可以操控页面元素来实现复杂的效果，但实际上，因为缺乏标准，两种浏览器实现相同的功能的方法完全不一样，导致JavaScript的发展陷入混乱。

实际上，DOM0只是历史坐标系中的一个参照点，并非真正的标准。

DOM1

1998年10月，W3C结合不同浏览器的优点推出了一个标准化的DOM，即DOM1。W3C将DOM定义为一个与平台和编程语言无关的接口，通过这个接口可以动态地访问和修改文档的内容、结构和样式。

DOM1定义了HTML和XML文档的底层结构。在DOM1中，DOM包含DOM core和DOM HTML两部分。DOM core规定了XML文档的结构标准，允许获取和操作文档的人一部分。DOM HTML在DOM核心的基础上通过添加HTML专用的对象和函数进行了扩展，如document对象。

img

DOM2

鉴于DOM1仅以映射文档结构为目标，DOM2引入了更多的交互能力。DOM2在原有DOM的基础上添加了鼠标、用户界面事件（DHTML长期支持鼠标和用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM1的核心进行了扩展，从而可支持XML的命名空间。

DOM2引入了下列模块，在模块中包含了众多新类型和新接口：

  • DOM视图(DOM views)：定义了跟踪不同文档视图的接口
  • DOM事件(DOM events)：定义了事件和事件处理的接口
  • DOM样式(DOM style)：定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围(DOM traversal and range)：定义了遍历和操作文档树的接口

img

DOM3

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

  • DOM加载和保存模块(DOM load and save)：引入了以统一方式加载和保存文档的方法
  • DOM验证模块(DOM validation)：定义了验证文档的方法
  • DOM核心的扩展(DOM style)：支持XML1.0规范，涉及XML Infoset, XPath 和 XML Base

img

浏览器对不同级别的DOM的支持情况如下：

image-20180905111112844

可以看到，移动端常用的webkit内核浏览器目前只支持DOM2，不支持DOM3。

操作DOM

HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or change.

DOM方法即你可以对HTML元素做什么，DOM属性即你可以设置和修改的HTML元素的值。

在DOM树中，所有的HTML元素都被映射成对象，每一个对象的方法和属性都是你操作它们的接口。

document对象

document对象即载入浏览器的HTML文档对象。如果你想要访问HTML页面中的元素，一般都从document对象开始访问。

访问HTML元素

  • document.getElementById(id) 按照ID查找元素，返回一个符合条件的元素
  • document.getElementsByTagName(name) 按照标签查找元素，返回一组符合条件的元素
  • document.getElementsByClassName(name) (IE5-8无效) 按照类名查找元素，返回一组符合条件的元素
  • document.querySelector() 返回第一个符合(css选择器)条件的元素
  • document.querySelectorAll(selectors) 也可以从某一个非document对象查找子元素

修改HTML结构

  • document.createElement(ele) 创建元素
  • document.removeChild(ele) 移除元素
  • document.appendChild(ele) 添加元素
  • document.replaceChilde(ele) 替换元素
  • document.write(text) 写入HTML流

获取HTML对象

  • document.anchors 返回所有的锚点
  • document.body 返回文档的body
  • document.cookie 返回文档的cookie
  • document.documentElement 返回<html>元素
  • document.forms 返回所有的表单
  • document.head 返回文档的头部
  • document.images 返回所有的图片
  • document.links 返回所有的链接
  • document.title 返回文档的标题

修改HTML元素属性

  • element.innerHTML=new html content 修改元素内包含的HTML内容
  • element.attribute = new value 修改元素的属性
  • element.setAttribute(attr, value) 设置元素属性
  • element.style.property = new style 修改元素的样式

DOM事件

事件类型

  • onclick 点击
  • onload / onunload 进入/离开页面，常可以用于检查cookies
  • onchange 常用于输入字段的验证
  • onmouseover / onmouseout 鼠标指针移动到/离开元素
  • onmousedown / onmouseup / onclick 鼠标点击的全部过程（鼠标按键被点击、鼠标按钮被松开、鼠标完成点击）

添加事件的方法

addEventListener(事件类型，事件函数)

addEventListener()有如下特征：

  • 给指定元素添加事件处理函数
  • 添加的事件处理函数不会覆盖原有事件函数
  • 可以通过addEventListener()给一个元素添加多个事件处理函数
  • 可以给一个元素的同一个事件添加多个事件处理函数（如添加两个点击事件）
  • 可以对任意的DOM对象进行事件监听，不止于HTML元素，如window对象也可以添加
  • addEventListener()方法使处理事件冒泡更容易
  • 可以通过removeEventListener()方法移除事件监听
  • addEventListener()的第一个事件类型参数不需要添加”on”前缀

DOM 节点

在HTML DOM中，所有的事物都是节点。根据W3C的HTML DOM标准：

  • 整个文档是一个文档节点
  • 每个HTML元素都是元素节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点

父、子、同胞节点

节点树中的节点彼此之间有层级关系。

  • 在节点树中，定点节点被成为根（root），即<html>元素
  • 每个节点都有父节点，除了根
  • 一个节点可以拥有任意数量的子节点
  • 同胞节点拥有相同的父节点

DOM 节点关ç³"

节点属性实现定位

可以通过节点的属性来定位到其他节点：

  • parentNode 对象的父节点
  • childNodes 对象的所有子节点
  • childNodes[index] 对象子节点中的某一个（根据索引号查找）
  • firstChild 第一个子元素
  • lastChild 最后一个子元素
  • nextSibling 后一个同胞节点
  • previousSibling 前一个同胞节点

节点属性获取文档

  • document.body 文档<body>元素（<body>到</body>内部的内容）
  • document.documentElement 整个HTML文档（<html>到</html>内部的内容）

节点的基本属性

nodeName
  • 只读属性
  • 元素节点的nodeName返回元素的标签名（且总是返回标签的大写形式）
  • 属性节点的nodeName返回属性名称
  • 文本节点的nodeName总返回#text
  • 文档节点的nodeName总返回#document
nodeValue
  • 返回节点的值
  • 元素节点的nodeValue总是null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值
nodeType
  • 返回节点的类型

HTML DOM节点的类型

1-元素节点
  • 元素节点对应HTML标签元素
  • 它的节点类型nodeType值是1
  • nodeName返回的值是大写的标签名
  • nodeValue值是null
2-属性节点

属性节点(attribute)对应HTML标签的属性，它继承标签对应的元素节点，不作为DOM树的一部分。

  • 它的nodeType值是2
  • nodeName返回属性名
  • nodeValue返回属性值
3-文本节点

文本节点（text）对应HTML标签内容。

  • 它的nodeType值是3
  • nodeName总是返回'#text'
  • nodeValue返回文本内容
8-注释节点

注释节点（comment）表示网页中的HTML注释

  • 它的nodeType值是8
  • nodeName总是返回#comment
  • nodeValue值未注释的内容
9-文档节点

文档节点（document）表示HTML文档，指向document对象

  • 它的nodeType值是9
  • nodeName值为#document
  • nodeValue是null
10-文档类型节点

文档类型节点（DocumentType）包含着与文档的doctype有关的所有信息

  • 它的nodeType值为10
  • nodeName值为doctype的名称
  • nodeValue值为null
11-文档片段节点

文档片段节点（DocumentFragment）是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源

  • 它的nodeType值为11
  • nodeName是#document-fragment
  • nodeValue是null

参考：