一、呈现模式
从 IE6 开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。
IE 为document 对象添加了一个名为 compatMode 属性，这个属性可以识别 IE 浏览器的文档处于什么模式，如果是标准模式，则返回 CSS1Compat，如果是混杂模式则返回 BackCompat。
<script> window.onload =function(){ alert(document.compatMode);//文档声明没错就是标准模式，去掉文档声明就变成怪异模式 } </script>
<script> window.onload =function(){ if (document.compatMode == 'CSS1Compat') { alert(document.documentElement.clientWidth);//如果是混杂模式下IE6,7,8为0，其他正常 } else { alert(document.body.clientWidth);//如果是混杂模式下用这个方法可以使IE也是正常的 } } </script>
后来 Firefox、Opera 和 Chrome 都实现了这个属性。从 IE8 后，又引入 documentMode新属性，因为 IE8 有 3 种呈现模式分别为标准模式 8，仿真模式 7，混杂模式 5。
所以如果想测试 IE8 的标准模式，就判断 document.documentMode > 7 即可。
二、滚动
DOM 提供了一些滚动页面的方法，如下：
<script> window.onload =function(){ var box = document.getElementById("box"); box.scrollIntoView(); //设置指定可见,当下面的内容需要将滚动条拉下来才可以看到的时候，只用该方法，当刷新页面的时候滚动条会自动下来，从而看到下面的内容 }; </script> </head> <body> <p>1</p> <p>1</p> <p>1</p> <p>1</p><p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <div id="box">测试Div</div> </body>
三、children 属性
由于子节点空白问题，IE 和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用 children 属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+、Opera8+和 Chrome，这个属性是非标准的。
<script> window.onload =function(){ var box = document.getElementById("box"); alert(box.children.length); //得到有效子节点数目 alert(box.children[0]);//获取第一个有效子节点 alert(box.children[0].nodeName); }; </script> </head> <body> <div id="box"> <p>测试Div</p> <p>测试Div</p> <p>测试Div</p> </div> </body>
四、contains()方法
判断一个节点是不是另一个节点的后代，我们可以使用 contains()方法。这个方法是 IE率先使用的，开发人员无须遍历即可获取此信息。火狐旧版本不支持，苹果3.0及以上才支持
<script> window.onload =function(){ var box = document.getElementById("box"); var p = box.firstChild; alert(box.contains(p));//判断box是不是p的父节点 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
在 Firefox 的 DOM3 级实现中提供了一个替代的方法 compareDocumentPosition()方法。这个方法确定两个节点之间的关系。
<script> window.onload =function(){ var box = document.getElementById("box"); var p = box.firstChild; alert(box.compareDocumentPosition(p));//20 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
为什么会出现 20，那是因为满足了 4 和 16 两项，最后相加了。为了能让所有浏览器都可以兼容，我们必须写一个兼容性的函数。
