[JavaScript]DOM扩展
1. 呈现模式
根据W3C对DOM的要求，浏览器可以自行为其添加属性和方法，以增强其功能。扩展DOM的做法已经相当普遍，对开发也有极大好处。
随着IE6开始区分标准模式和混杂模式，确定浏览器处于何种模式也就有必要。IE为document对象添加了一个compatMode属性，以便标识浏览器处于什么模式，如果是标准模式，则document.compatMode的值等于"CSS1Compat"，如果是混杂模式，则document.compatMode的值等于"BackCompat"。
后来，Firefox、Opera、Safari和Chrome都实现了这个属性。IE8又为document对象引入了一个名为documentMode的新属性。因为IE8有3种不同的呈现模式，而引入这个属性正是为了分辨这些模式。这个属性的值如果是5，则表示混杂模式，如果是7，则表示IE7仿真模式，如果是8，则表示IE8标准模式，例如：
if (document.documentMode > 7) {
alert("IE8+ Standards Mode");
}
2. 滚动
DOM规范没有就如何滚动页面区域作出规定。为此，各种浏览器都实现了相应的方法，用于以不同方式控制滚动，这些方法都是作为HTMLElement类型的扩展存在的，因此可以在所有元素上使用。
1) scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在视口中看到当前元素。
2) scrollIntoViewIfNeeded(alignCenter): 只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。
3) scrollByLines(lineCount): 将元素的内容滚动指定的行数的高度，可以是正值或负值。
4) scrollByPages(pageCount): 将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。Safari和Chrome实现了这个方法。
scrollIntoView()和scrollIntoViewIfNeeded()作用的是元素的窗口，而scrollByLines()和scrollByPages()影响的是元素自身。
3. children属性
IE与其他浏览器对文本节点中空白符解释不一致，导致children属性的出现。作为HTMLCollection，children属性中只包含元素的子节点中那些也是元素的节点。即在元素的子节点都是元素节点的情况下，children属性与childNodes是相同的，例如：
var childCount = element.children.length; var firstChild = element.children[0];
除了Firefox之外，其他浏览器都支持children集合。IE中的children集合会包含注释节点。
4. contains()方法
开发人员需要确定某个节点是否是另一个节点的后代，IE先引入contains()方法可以获知此信息，例如：
alert(document.documentElement.contains(document.body));
IE、Safari3及更高版本、Opera8及更高版本、Chrome都支持contains()方法。Firefox不支持，但Firefox在DOM3级实现中提供了替代的compareDocumentPosition()方法。
5. 操作内容
为提供插入文本和HTML代码之类的功能，IE4先引入了innerText、innerHTML、outerText和outerHTML等属性。
通过innerText属性可以操作元素中包含的所有文本内容，由于不同浏览器处理空白符的方式不同，因此输出的文本可能会也可能不会包含原始HTML代码中的缩进，例如：
mydiv.innerText = "Hello World!";
设置innerText只会生成当前节点的一个子文本节点，所以会对文本进行HTML编码，可以利用此点过滤HTML标签，例如：
mydiv.innerText = mydiv.innerText;
IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持，但支持作用类似的textContent属性。
innerHTML与innerText在很多方面都相似。innerHTML返回当前元素所有子节点的HTML表现，包括元素、注释及文本节点。在不同浏览器中，innerHTML返回的文本可能有所不同。IE和Opera常把所有标签转换为大写，而Safari、Chrome和Firefox则以文档中指定的形式返回HTML。
innerHTML也有一些限制，比如，在多数浏览器中，通过innerHTML插入的<script>元素不会被执行。IE是唯一支持这种操作的浏览器，但必须指定defer特性。在多数浏览器中，通过innerHTML写入<style>元素也存在类似的问题。
除了作用域范围扩大到包含调用它的节点之外，outerText与innerText基本没区别。在读取信息时，outerText与innerText的结果完全一样，但在写入信息时，outerText不只替换调用它的元素的子节点，也会替换整个元素。
outerHTML与innerHTML的区别和outerText与innerText的区别类似。在读取信息时，outerHTML会返回调用它的元素的HTML代码。在写入信息时，outerHTML会用解析给定的HTML字符串创建的DOM子树替代调用它的节点。
本文出自 “青锋笔记” 博客，谢绝转载！