JavaScript高级程序设计之DOM 扩展之HTML5之HTMLDocument的变化第11.3.3讲

本文链接：https://blog.csdn.net/Jane617_min/article/details/49662149

HTML5 扩展了HTMLDocument，增加了新的功能。与HTML5 中新增的其他DOM 扩展类似，这些
变化同样基于那些已经得到很多浏览器完美支持的专有扩展。所以，尽管这些扩展被写入标准的时间相
对不长，但很多浏览器很早就已经支持这些功能了。
1. readyState 属性
IE4 最早为document 对象引入了readyState 属性。然后，其他浏览器也都陆续添加这个属性，
最终HTML5 把这个属性纳入了标准当中。Document 的readyState 属性有两个可能的值：
loading，正在加载文档；
complete，已经加载完文档。
使用document.readyState 的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指
示器。在这个属性得到广泛支持之前，要实现这样一个指示器，必须借助onload 事件处理程序设置一

个标签，表明文档已经加载完毕。document.readyState 属性的基本用法如下。

if (document.readyState == "complete"){
//执行操作
}

支持readyState 属性的浏览器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。

2.
兼容模式
自从IE6 开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要
功能。IE 为此给document 添加了一个名为compatMode 的属性，这个属性就是为了告诉开发人员浏
览器采用了哪种渲染模式。就像下面例子中所展示的那样，在标准模式下，document.compatMode 的
值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。

if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

后来，陆续实现这个属性的浏览器有Firefox、Safari 3.1+、Opera 和Chrome。最终，HTML5 也把
这个属性纳入标准，对其实现做出了明确规定。

3. head 属性
作为对document.body 引用文档的<body>元素的补充，HTML5 新增了document.head 属性，
引用文档的<head>元素。要引用文档的<head>元素，可以结合使用这个属性和另一种后备方法。

var head = document.head || document.getElementsByTagName("head")[0];

如果可用，就使用document.head，否则仍然使用getElementsByTagName()方法。
实现document.head 属性的浏览器包括Chrome 和Safari 5。