HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)

怼烎@ 2022-09-19 14:26 171阅读 0赞

之前为大家介绍了些许关于HTML5新添加的小东东，想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。

# 　　1、readyState属性 #

早在IE4时代的时候，document对象就引入了readyState属性了，但是一直都没有纳入标准，如今，在HTML5的时代了，就纳入规范了。readyState属性有两个可能的值：

(1)loadding，正在加载文档

(2)complete，已经加载完文档

如何才能恰当的使用document.readyState呢?document.readyState最恰当的使用方式就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持之前，要实现这样一个指示器，还是必须需要onload事件处理程序设置一个标签，表明文档已经加载完毕。下例子如下

## 　　HTML代码 ##

## 　　JavaScript代码 ##

## 　　预览效果 ##

![HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)][HTML5_HTMLDocument_readyreState_head]

# 　　2、兼容模式判断 #

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

## 　　JavaScript代码 ##

if(document.compatMode == "CSS1Compat"){
    	alert("标准模式")
    }else{
    	alert("混杂兼容模式")
    }

# 　　3、Head属性 #

作为对document.body引用文档的body元素的补充，HTML5新增了document.head属性，这样就可以引用head标签了。使用方法如下

## 　　JavaScript代码 ##

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

就像上面那样做一下兼容，如果可以用的话，就是用document.head，否则仍然使用getElementsByTagName()方法。document.head属性支持的浏览器有Chrome和safari 5。

HTML5实战与剖析之HTMLDocument变化(readyState属性、兼容模式和head属性)就为大家介绍到这里，在百忙当中学习一下新的小知识，生活还是很充实的，并把学习的一些小东东和大家分享一下，那简直的神仙般的日子了。HTML5实战与剖析的相关更新，欢迎关注梦龙小站。

[HTML5_HTMLDocument_readyreState_head]: /images/20220828/9c839331ad9e4a828bc9366b098bb2a0.png