DOM操作介绍整理（整合资料）

DOM概述

本文主要是总结整理一些DOM的api，对一些函数例子做一些编写和整理，以供开发者进行学习讨论。

DOM介绍

DOM译为文档对象模型（document object model），DOM是HTML和XML文档的编程接口，提供了文档的结构化表述，定义了一种方式可以让他从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM将文档解析成一个由节点和对象组成的结构集合。他会将web页面和脚本或者程序语言连接起来。

一个web页面是一个文档，他可以在浏览器窗口或者通过HTML源码显示出来，但是这两种形式展示的是相同的一份文档。DOM提供了对同一份文档的另一种表现，存储和操作的形式。

DOM对象

1.Attr对象

该类型使用对象来表示一个DOM元素的属性。在大多数DOM方法中，你可能会直接通过字符串的方式获取属性值（例如Element.getAttribute(）），但是一些函数（例如Element.getAttributeNode()）或通过迭代器访问时则返回Attr类型。

2.DOMTimeStamp

DOMTimeStamp类型表示绝对或相对毫秒数，具体取决于它出现的规范。

3.NodeList

NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。

NodeList不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。我们还可以使用 Array.from() 将其转换为数组。

不过，有些浏览器较为过时，没有实现 NodeList.forEach() 和 Array.from()。我们可以用 Array.prototype.forEach() 来规避这一问题。

在一些情况下，NodeList 是一个实时集合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变化。例如，Node.childNodes 是实时的：

varparent=document.getElementById('parent');
varchild_nodes=parent.childNodes;
console.log(child_nodes.length); // 我们假设结果会是“2”parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 但此时的输出是“3”

在其他情况下，NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如  document.querySelectorAll 就会返回一个静态 NodeList。

4.CharacterData

CharacterData 抽象接口（abstract interface）代表 Node 对象包含的字符。这是一个抽象接口，意味着没有 CharacterData 类型的对象。 它是在其他接口中被实现的，如 Text、Comment 或 ProcessingInstruction(en-US) 这些非抽象接口。

5.DOMSettableTokenList

DOMSettableTokenList实际上是merged into DOMTokenList在WHATWG“生活标准”版本的规范。有参数value，还在测试中。

6.ParentNode

ParentNode 混合了所有(拥有子元素的) Node 对象包含的共有方法和属性。

ParentNode 是一个原始接口，不能够创建这种类型的对象；它在 Element、Document 和 DocumentFragment 对象上被实现。

7.childNode

ChildNode 混合了所有(拥有父对象) Node 对象包含的公共方法和属性。其由 Element、DocumentType 和 CharacterData 对象实现。

8.DOMStringList(已废弃)

9.ProcessingIntroduction

ProcessingInstruction表示处理指令：即，一个节点，其中嵌入针对特定应用程序的指令，但该指令可能被不识别指令的任何其他应用程序忽略。

10.Comment

Comment 接口代表标签（markup）之间的文本符号（textual notations）。尽管它通常不会显示出来，但是在查看源码时可以看到它们。在 HTML 和 XML 里，注释（Comments）为 '' 之间的内容。在 XML 里，注释中不能出现字符序列 '--'。

11.CustomEvent

CustomEvent 事件是由程序创建的，可以有任意自定义功能的事件。

12.Document

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 、 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。

Document 接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型（例如HTML、XML、SVG，...），还能使用更多 API：使用 "text/html" 作为内容类型（content type）的 HTML 文档，还实现了 HTMLDocument 接口，而 XML 和 SVG 文档则（额外）实现了 XMLDocument 接口。

13.DocumentFragment

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

该接口在 Web 组件（Web components）中也非常有用：

14.DocumentType

DocumentType 接口表示了一个包含文档类型的节点 Node .

15.DOMError(已废弃)

DOMError 接口描述一个错误对象,该对象包含一个错误的名字。

error类型

16.DOMException

DOMException 接口代表调用方法或访问 Web API 属性时发生的异常事件（被称为异常，exception）。 这基本上是在 Web API 中如何描述错误情况的。

每个异常都有一个名称 name，一个采用骆驼式命名法的简短字符串，用于描述识别错误或异常情况。

骆驼式命名法（CamelCase style），又称驼峰命名法。与 JavaScript 中更常见的小驼峰命名法有别，此处应是指大驼峰命名法。大驼峰命名法又称 Pascal 命名法。具体为名称中的每个单词仅首字母大写（Capitalize）。

错误名称：

17.DOMImplenatation

DOMImplementation 接口代表了一个对象，这个对象提供了不依赖于任何document的方法。这个对象可以通过Document.implementation属性获得

18.DOMString

DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。

将 null传递给接受DOMString的方法或参数时通常会把其stringifies为“null”。

19.DOMTokenList    

DOMTokenList 接口表示一组空格分隔的标记（tokens）。如由 Element.classList、HTMLLinkElement.relList(en-US)、HTMLAnchorElement.relList(en-US) 或 HTMLAreaElement.relList(en-US) 返回的一组值。它和 JavaScript Array 对象一样，索引从 0 开始。DOMTokenList 总是区分大小写（case-sensitive）。

20.Element

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

在 Web 平台的领域以外的语言，比如 XUL，通过 XULElement 接口，同样也实现了 Element 接口。

21.event

Event 接口表示在 DOM 中出现的事件。

一些事件是由用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。事件也可以通过脚本代码触发，例如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标（target）。

有许多不同类型的事件，其中一些使用基于 Event 主接口的二次接口。Event 本身包含适用于所有事件的属性和方法。

很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。通过EventTarget.addEventListener()方法可以将事件处理函数绑定到不同的HTML elements上 (比如,

, 等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用HTML event handler attributes来绑定事件处理函数的方式。除此之外，通过正确使用removeEventListener()方法，这些事件处理函数也能被移除。

Note: 一个元素可以绑定多个事件处理函数，甚至是同一种类型的事件。尤其是这种分离的，并且相互独立的代码模块对同一个元素绑定事件处理函数，每一个模块代码都有着独立的目的。（比如，一个网页同时有着广告模块和统计模块同时监听视频播放元素）

当有很多嵌套的元素，并且每一个元素都有着自己的事件处理函数，事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠，事件处理函数可能会依次被触发，触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。

22.EventTarget

EventTarget 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。

Element，document 和 window 是最常见的 event targets ，但是其他对象也可以作为 event targets，比如 XMLHttpRequest，AudioNode，AudioContext  等等。

许多 event targets （包括 elements， documents 和 windows）支持通过 onevent 特性和属性设置事件处理程序 (en-US) (event handlers)。

23.HTMLCollection

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。

注意：由于历史原因（DOM4之前，实现该接口的集合只能包含 HTML 元素），该接口被称为 HTMLCollection。

HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

24.MutationObserver

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

25.MutationRecord

每个 MutationRecord 都代表一个独立的 DOM 变化，在每次随 DOM 变化调用 MutationObserver 的回调函数时，一个相应的 MutationRecord 会被作为参数，传递给回调函数。

26.Node

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。

以下接口都从 Node 继承其方法和属性：

Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction(en-US), DocumentFragment, DocumentType, Notation, Entity, EntityReference

在方法和属性不相关的特定情况下，这些接口可能返回 null。它们可能会抛出异常 - 例如，当将子节点添加到不允许子节点存在的节点时。

27.NodeFilter

NodeFilter 接口表示一个对象，此对象用于过滤 NodeIterator 或 TreeWalker 中的节点。它既不能处理 DOM，也不能遍历节点；它只能根据提供的过滤器对单个节点进行判定。

注意：浏览器不提供任何实现该接口的对象。用户需要自己编写该对象，根据需要自行定制 acceptNode() 方法，以用于TreeWalker 或 NodeIterator 对象。

可能的值如下：

28.NodeIterator

NodeIterator 接口表示一个遍历 DOM 子树中节点列表的成员的迭代器。节点将按照文档顺序返回。

NodeIterator可以使用Document.createNodeIterator() 方法创建，如下所示：

varnodeIterator=document.createNodeIterator(root, whatToShow, filter);

29.Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外，还可以通过 Document 对象的构造函数 Range() 来得到 Range。

30.Text

Text 节点表示 HTML 或 XML 文档中的一系列纯文本。因为纯文本出现在 HTML 和 XML 的元素和属性中，所以 Text 节点通常作为 Element 节点和 Attr 节点的子节点出现。

Text 节点继承了 CharacterData 接口，通过从 CharacterData 接口继承的 data 属性或从 Node 接口继承的 nadevalue 属性，可以访问 Text 节点的文本内容。

用从 CharacterData 继承的方法或 Text 接口自身定义的 splitText() 方法可以操作 Text 节点。使用 document.createTextNode() 来创建一个新的 Text 节点。

Text 节点没有子节点。

31.TreeWalker

TreeWalker 对象用于表示文档子树中的节点和它们的位置。

TreeWalker 可以使用 Document.createTreeWalker() 方法创建。

32.URL

URL接口用于解析，构造，规范化和编码 URLs。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。

如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。

33.window

window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。

window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。

本节为 DOM Window 对象中可用的所有方法、属性和事件提供简要参考。window 对象实现了 Window 接口，此接口继承自 AbstractView 接口。一些额外的全局函数、命名空间、对象、接口和构造函数与 window 没有典型的关联，但却是有效的，它们在 JavaScript参考 和 DOM参考 中列出。

在有标签页功能的浏览器中，每个标签都拥有自己的 window 对象；也就是说，同一个窗口的标签页之间不会共享一个 window 对象。有一些方法，如 window.resizeTo 和 window.resizeBy 之类的方法会作用于整个窗口而不是 window 对象所属的那个标签。一般而言，如果一样东西无法恰当地作用于标签，那么它就会作用于窗口。

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。

同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Windos 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

34.worker

Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 `URL` 为指定的脚本。

Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源（注意：Blink暂时不支持嵌套 Worker）。

需要注意的是，不是所有函数和构造函数(或者说…类)都可以在 Worker 中使用。具体参考页面 Worker 所支持的函数和类。Worker 可以使用 XMLHttpRequest 发送请求，但是请求的  responseXML 与 channel 两个属性值始终返回null （fetch 仍可正常使用，没有类似的限制）。

35.XMLDocument

XML文件接口表示 XML 文档。它继承了通用document，并且没有添加任何特定的方法或属性：但是，与这两种类型的文档，几个算法的行为不同。