以下内容总结自《JS高级程序设计》第三版

---

DOM作为API已经很完善了，但是为了实现更多功能，仍然会有一些属于浏览器的专属扩展。
在经过时间的检验后，W3C将一些专有扩展标准化并写入规范中。
而对DOM的扩展标准化主要有两个方面

  1.  Selectors API  (选择符API)
  2.  HTML5

此外，还有一个次要的规范

 Element Traversal (元素遍历)

下面就来说说这几个东西。

一、 选择符API

选择符API有两个核心的方法 :quertSelector()和querySelectorAll()

1. querySelector() 方法

参数： 1. CSS选择符
返回值： 返回匹配到的第一个元素。找不到返回null

例：

//  取得body元素
let body = documnet.querySelector('body')

// 取得id为'myDiv'的元素
let div = documnet.querySelector('#mydiv')

// 取得class为'selected'的第一个元素
let div = documnet.querySelector('.selected')

// 取得class为'button'的第一个图像元素
let div = documnet.querySelector('img')

在上面我们使用的是document对象，当然我们也可以使用Element类型的对象，只是查找范围缩小到了element对象之内。

2、querySelectorAll() 方法

参数：   1. CSS选择符
返回值：  匹配元素集合，NodeList类型。匹配不到时，NodeList是空的。

和querySelector相比参数相同，querySelector只能返回匹配到的第一个，querySelectorAll能返回所有匹配的元素。

二、元素遍历

元素遍历为DOM添加了5个属性

• childElementCount: 返回子元素（不包括文本节点和注释）的个数
• firstElementChild: 指向第一个子元素，firstChild的元素版
• lastElementChild: 指向最后一个子元素，lastChild的元素版
• previousElementSibling: 指向前一个同辈份的元素，previousSibling的元素版
• nextElementSibling: 指向后一个同辈份的元素，nextSibling的元素版

这五个属性，是为了弥补不同浏览器之间的差异而添加的。

三、HTML5

HTML5是HTML的升级版，来看看对比吧

HTML： 主要定义标记，与JavaScript相关的内容交给DOM规范去定义。
HTML5：围绕何如使用新增标记定义了大量的JavaScript的API。

1、与类相关的扩充

此类扩充能够为元素添加样式和操作元素。

1.1 getElementsByCLassName()

参数： 1. 包含一个或多个类名的字符串
返回值：匹配到的元素集合，NodeList类型

1.2 classList

classList是新增的一个操作类名的属性
来看看和className 的区别

className：
返回值：字符串
作用： 添加、删除和替换类名。
classList：
返回值：类名集合，DomTokenList类型
作用： 同className

classList有四个方法来操作类名集合

• add(value): 将给定的字符串添加到列表中。如果值已存在，就不添加。
• contains(value)：表示列表中是否存在给定的值，如果存在返回true，没有返回false
• remove(value)：从列表中删除指定的字符串
• remove(value)：如果列表中已经存在给定的值，删除；如果不存在，添加。

classList比className操作更加简单，推荐使用。

2、焦点管理

HTML5添加了辅助管理DOM焦点的功能，分别是一个属性和一个方法。

• 属性 document.activeElement

返回值：当前获得焦点的元素。
元素获得焦点的方式有页面加载、用户输入和在代码中调用focus()方法。

• 方法 element.hasFocus()

参数：无
返回值： 检测元素是否获得焦点。

3、HTMLDocument的变化

HTML5扩展了HTMLDocument属性，增加了新的功能。

3.1 redayState属性

可能的值：

• loading：正在加载文档。
• complete：已经加载完文档。

使用场景：
代替onload事件。

3.2 兼容模式（compatMode属性）

该属性能够区分渲染页面的模式是标准的还是混杂的

返回值：
1. CSS1Compat ：标准模式
2. BackCompat: 混杂模式

3.4 字符集属性

• charset属性

默认值：UTF-16

我们可以直接修改这个属性来改变文档字符集

document.charset = 'UTF-8'

还可以通过另外两种方法来修改字符集

设置<meta>元素
设置响应头部

• defaultCharset 属性
  表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能会不一样。

3.5 自定义属性数据

我们可以为元素添加非标准的属性，也就是自己定义属性。

注意： 自定义属性需要添加前缀 data-

• 应用场景：
  需要通过元素存取数据时使用。

3.6 插入标记

通过插入标记，我们能够简化一堆DOM节点再按照顺序插入到页面的这种特别麻烦的操作。

3.6.1 innerHTML属性

读模式：返回调用元素的所有子节点（包括元素、注释和文本节点对应的HTML标记）
写模式：根据传入的值（字符串）创建新的DOM树，替换调用元素的所有子节点。

• 注意

• 不同浏览器的innerHTMl返回值会不同。
  IE和Opera将所有标签转成大写形式，其他浏览器不会干这事
• innerHTMl写模式不会执行写入的<script>脚本。(IE8或更早版本可以)

3.6.2 outerHTML属性

读模式： 返回调用它的元素和所有子节点的HTML标签。
写模式： 根据指定的HTML字符串创建新的DOM子树，然后替换调用元素。

和innerHTMl的区别，就是把调用元素也计算在内了。

3.6.3 insertAdjacentHTML() 方法
这个方法也可以插入标记。

参数：

1. 指定值。
   beforebegin：在当前元素之前插入一个紧邻的同辈元素
   afterbegin：在当前元素之下插入一个新的子元素或在第一个子元素之前插入新的元素
   beforeend：在当前元素之下插入一个新的子元素或在最后的子元素之后插入新的元素
   afterend：在当前元素之后插入一个紧邻的同辈元素

3.6.4 内存和性能问题

• 在删除带有事件处理程序或引用了其他JavaScript对象子树时，可能会导致内存占用问题。所以删除前最好手动清空所有的事件处理冲和和JavaScript对象属性。
• 合理使用innerHtml，一次性传入多个标签代替多次传入标签。

3.7 scrollIntoView() 方法

这个方法用来控制页面滚动。所有的HTML元素都可以调用

参数：1. true或不传，窗口滚动到元素顶部和视口顶部平齐的位置
false，调用元素会尽可能的出现在视口中。

4 专有扩展

专有扩展虽然没有加入到规范中，但还是有几个比较常用的。

4.1 children属性

该属性返回调用元素的元素子节点，而childNode属性返回所有子节点。

4.2 contains() 方法

查看某个节点是否是另外一个节点的子节点

参数：要检测的子节点
返回值： ture|false

另外还有一个compareDocumentPosition() 方法也可以确定节点关系。

参数：要检测的节点
返回值：1：无关 2：居前 :4：居后 8：包含 16：被包含

4.3 插入文本

4.3.1 innerText属性
通过该属性能够操作元素中包含的所有文本内容。

读模式： 返回个字符串，每个文本节点中的文字通过换行的方式连接。
写模式： 传入字符串即可。会替换调用元素的所有子元素。

• 应用：
  大家可以通过document.body.innerText来查看当前页面的body内的所有文本元素。

• textContent
  和innerText作用类似，但textContent会返回行内样式和脚本代码，innerText只会返回文本内容。

4.3.1 outerText属性
除了作用范围扩大到了调用元素之外，和innerText没有区别