09.第11章：DOM扩展

1. 选择符 Selectors API

包括两个方法：querySelector()和querySelectorAll()

1.1querySelector()方法

接收一个CSS选择符，返回与该模式匹配的第一个元素。

1.2 querySelectorAll()方法

返回的是NodeLIst对象

取得返回对象中的每一个元素

1.3 matchesSelector()方法

判断调用语速和选择符是否匹配

2.元素遍历新属性

对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他浏览器都会返回文本节点，为了解决这一差异，新定义了一组属性。

之前实现元素遍历，需要判断该节点是不是元素

现在实现方法如下

3.HTML5中新增的DOM

3.1.和类相关

• getElementsByClassName()
  根据类名获取元素，返回NodeList
  调用这个方法时，只有位于调用元素子树中的元素才会返回。
  在document对象上调用该方法会返回与类名匹配的所有元素，在元素上调用该方法只会返回后代元素中匹配的元素。

  
  
  

• classList属性
  用于操作多个类名

  
  
  
  
  
  

3.2 焦点管理

• document.activeElement属性，始终引用DOM中当前获得了焦点的元素。

• document.hasFocus()方法:确定文档是否获得了焦点

3.3 HTMLDocument的变化

• readyState属性
  包括两个可能的值：loading，正在加载文档；complete，已经加载完文档

• 兼容模式
  在标准模式下，document.compatMode的值等于"CSSlCompat"
  在混杂模式下，document.compatMode的值等于“BackCompat”

  
  
  

• head属性：Chrome和Safari 5
  引用文档的元素

  
  
  

3.4 字符集属性

• charset

  
  
  

• defaultCharset

  
  
  

3.5 自定义数据属性

可以为元素添加非标准的属性，但要添加前缀data-。添加自定义属性之后，可以通过元素的dataset属性访问自定义属性的值。

3.6 插入html语句

• innerHTML属性
  读模式下：属性返回与调用元素的所有子节点对应的HTML标记
  写模式下：根据指定的值创建DOM树，用这个DOM树替换调用元素原先的所有节点

  
  
  
  
  
  

• outerHTML属性
  读模式：但会调用它的元素及所有子节点的HTML标签
  写模式：根据指定的HTML字符串创建新的DOM子树，用这个DOM子树完全替换调用元素。

  
  
  

div.outerHTML会返回和上面相同的代码。

• insertAdjacentHTML()方法
  接收两个参数：插入位置，和要插入的HTML文本
  第一个参数是下列值之一

  
  
  
  
  
  

4.专有扩展

4.1 文档模式

文档模式决定了你可以使用哪个级别的css，可以在JavaScript中使用哪些API。