DOM拓展
- 选择符API
- querySelector() 接收一个CSS选择符，返回与该模式匹配的第一个元素；如果没有找到，则返回null。通过Document类型调用该方法时，会在文档元素的范围内查找匹配的元素；而通过Element类型调用该方法时，只会在该元素后代元素范围内查找匹配的元素。
- querySelectorAll() 接收一个CSS选择符，返回所有匹配的元素，是一个NodeList的实例。如果么有找到匹配的元素，则NodeList为空。要取得NodeList中的每一个元素，可以使用方括号或则item()方法。
- matchesSelector() 接收一个CSS选择符，如果调用元素与选择符匹配，则返回true；否则返回false。
- 元素遍历：Element Traversal API为DOM元素添加了五个元素：
- childElementCount：返回子元素(不包括文本节点和注释)的个数。
- firstElementChild：指向第一个子元素；firstChild的元素版。
- lastElementChild：指向最后一个子元素；lastChild的元素版。
- previousElmentChild：指向前一个同辈元素；previousSibling的元素版。
- nextElementChild：指向后一个同辈元素；nextSibling的元素版。
- HTML5
- 与类相关的扩充
- getElementByClassName() 接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，先后顺序不重要。在document对象上调用该方法会始终返回与类名匹配的所有元素；在元素上调用该方法只会返回后代元素中匹配的元素。
- classList属性 是新集合类型DOMTokenList的实例。DOMTokenList有一个表示自己包含多少元素的length属性，而取得每个元素可以使用item()方法或使用方括号语法。此外还有如下方法使用：
- add(value)：将给定的字符串值添加到列表中。如果该值已经存在，则不添加。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true；否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中存在给定的值，则删除；如果不存在则添加它。
- 焦点管理
- document.activeElement属性 该属性始终会引用DOM中当前获取了焦点的元素。元素获取焦点的方式有页面加载，用户输入和在代码中调用focus()。在默认下，文档刚加载完成时，该属性保存的是document.body元素；文档加载期间，该元素的值是null。
- document.hasFocus()方法，用于确定文档是否获取了焦点。
- HTMLDocument的变化
- document.readyState属性用来表示文档是否加载完成，有两个值
- loading：正在加载文档
- complete：已经在玩完文档
- 兼容模式：区分渲染页面的模式是标准的还是混杂的，用document.compatMode，有两个值
- CSS1Compat：标准模式
- BackCompat：混杂模式
- document.head 用来引用文档的
<head>元素。用以下方式来实现兼容
document.head || document.getElementByTagName("head")[0] - document.readyState属性用来表示文档是否加载完成，有两个值
- 字符集属性
- document.charset 设置文档中实际使用的字符集。支持该属性的有ie，safari，opera，chrome。
- document.defaultCharset 表示根据默认浏览器和操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那么charset可能会和defaultCharset属性的值不同。支持该属性的浏览器有ie，safari，chrome。
- Firefox支持document.Characterset。
- 自定义属性：要使用data-开头，可随意添加和命名。通过元素的dataset属性来访自定义属性的值。
- 插入标记
- innerHTML属性
- 在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素，注释和文本节点)对应的HTML标记。
- 在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
- 不同浏览器返回的文本格式会有所不同。
- 在大多数浏览器中，通过innerHTML插入
<script>元素并不会执行其中的脚本。IE8以及更早的版本是唯一能在这种情况下执行脚本的浏览器，但必须为<script>元素指定defer属性，且<script>元素必须位于“有作用域的元素”之后。 - 在大多数浏览器中，都支持以直观的方式通过innerHTML插入
<style>元素。IE8以及更早的版本下则类似于<script>元素，必须位于“有作用域的元素”之后。 - 并不是所有元素都支持innerHTML元素。不支持innerHTML属性的元素有：
<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>- IE8以及更早的版本中，
<title>也没有
- outerHTML属性
- 在读模式下，该属性返回调用它的元素及所有子节点的HTML标签。
- 在写模式下，该属性会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
- insertAdjacentHTML()方法
- 接收两个参数：插入位置和要插入的HTML文本。第二个参数是HTML字符串，而第一个参数必须是下列值之一：
- "beforebegin"：在当前元素之前插入一个相邻的同辈元素。
- "afterbegin"：在当前元素之下插入一个新的子元素或在第一个子元素之前插入一个新的子元素。
- "beforeend"：在当前元素之下插入一个新的子元素或在最后一个子元素之后插入一个新的子元素。
- "afterend"：在当前元素之后插入一个紧邻的同辈元素。
- 接收两个参数：插入位置和要插入的HTML文本。第二个参数是HTML字符串，而第一个参数必须是下列值之一：
- 内存与性能问题
- 在使用innerHTML属性，outerHTML属性，insertAdjacentHTML()方法时，最好先手动删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
- 当使用innerHTML属性时，最好先单独创建字符串，然后再一次性的将结果字符串赋值给innerHTML属性，这样效率更高。
- scrollIntoView()方法：作用于元素的容器，所有浏览器都支持。
- 可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
- 如果传入true或不传入参数，那么窗口滚动之后就会让调用元素的顶部与视口顶部尽可能的平齐。如果传入false，调用元素会尽可能全部出现在视口中。
- innerHTML属性
- 与类相关的扩充
- 专有拓展
- 文档模式
- IE8引入新的概念叫“文档模式”，页面的文档模式决定了可以使用那些功能。
- 到了IE9，共有四种文档模式：
- IE5：以IE5混杂模式渲染页面。IE8以及更高版本的新功能无法使用。
- IE7：以IE7标准模式渲染页面。IE8以及更高版本的新功能无法使用。
- IE8：以IE8标准模式渲染页面。IE8中的新能都可以使用，可以使用SelectorsAPI，更多CSS2选择符以及某些CSS3功能。但无法使用IE9中的新功能。
- IE9：以IE9标准模式渲染页面。ie9的新功能都能使用，比如ECMAScript5，完整的CSS3以及更多HTML5功能。这个文档模式是最高级的模式。
- 要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible，或通过等价的
<meta>标签来设置。
- children属性：由于IE9之前的版本与其他浏览器在处理文本节点中的空白符时有差异，所以有了children属性。该属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。除此之外，与childNode无区别。支持该属性的有IE5，Safari2(但有BUG)，Safari3，opera8和chrome。IE8及更早版本会包含注释节点，但IE9只会返回元素节点。
- contains()方法：确定调用该方法的元素是不是传入该方法的元素的祖先节点。如果是，返回true；否则返回false。支持该方法的有IE，Firefox9+，chrome，opera，Safari。
- compareDocumentPosition()方法：确定节点间的关系，返回一个表示关系的位掩码。支持这个方法的有IE，Firefox9+，chrome，opera，Safari。
掩码 节点关系 1 无关(给定节点不在当前文档中) 2 居前(给定节点在DOM树中位于参考节点之前) 4 居后(给定节点在DOM树中位于参考节点之后) 8 包含(给定节点是参考节点的祖先) 16 被包含(给定的节点是参考节点的后代) - 插入文本
- innerText属性 操作元素中包含的所有文本，包括子文档树中的文本。在通过该元素读取值时，会按照由浅入深的顺序，将文档树中的所有文本拼接起来。通过该属性写入值时，会删除元素的所有子节点，插入包含相应文本值的文本节点。
- textContent属性 与上面属性作用相同，是DOM Level3规定的属性。
- outerText属性 与innerText属性没啥区别，只是该属性还会作用于调用它的节点。当读取文本时，结果与innerText属性完全相同；当写入时，该属性不止是替换调用它的元素的子节点，而是替换掉整个元素（包括子节点）。支持该属性的有IE4+，safari3+，opera8+，chrome。
- 滚动
- scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，那么这个方法什么也不做。如果将可选的alignCenter参数设置为true，则表示尽量将该元素显示在视口中部垂直方向。只有safari和chrome支持。
- scrollByLines(lineCount)：将该元素的内容滚动指定的行高，lineCount值可以是正值也可以是负值。只有safari和chrome支持。
- scrollByPages(pageCount)：将该元素的内容滚动指定的页面高度，具体高度由元素对的高度决定。只有safari和chrome支持。
- 注意：scrollIntoViewIfNeeded(alignCenter)作用对象是元素的容器，而其他两个方法作用的是元素本身。
- 文档模式
