HTML5 actual combat and analysis of HTMLDocument changes

I have previously introduced you to some of the new additions to HTML5, and I believe you all have some understanding of them. Today I will introduce to you the newly added content about HTMLDocument in HTML5. So what are the newly added contents about HTMLDocument in HTML5? The newly added contents about HTMLDocument in HTML5 include readyState attribute, compatibility mode judgment and head attribute. Let me introduce these newly added little things to you one by one.

1. readyState attribute

As early as the IE4 era, the document object introduced the readyState attribute, but it has never been included in the standard. Now, in HTML5 As time goes by, it has been incorporated into the norm. The readyState attribute has two possible values:

　(1) loading, the document is being loaded

　(2)complete, the document has been loaded

How to use document appropriately What about .readyState? The most appropriate way to use document.readyState is to use it to implement an indicator that the document has been loaded. Until this property is widely supported, implementing such an indicator will still require the onload event handler to set a label indicating that the document has been loaded. The following example is as follows

HTML code

<p>梦龙小站</p>
<p class="complete"></p>

JavaScript code

<script type="text/javascript">
window.onload = function(){
	var a = 0;
	var b = 0;
	if(document.readyState == "complete"){
		$(".complete").html( "加载好了" )
	}

	if(document.readyState == "loading"){
		$(".load").html( $(".load").html() + "<br/>" + a++ )
	}
};

Preview effect

2. Compatibility mode judgment

After IE6, it began to distinguish the modes of rendering pages, divided into standard and mixed, and detect the compatibility mode of the page. It becomes a necessary function of the browser. IE adds an attribute called compatMode to the document for this purpose. This attribute is to tell the developer which rendering mode the browser uses. As shown in the small example below, in standard mode, the value of document.compatMode is equal to "CSS1Compat", while in promiscuous mode, the value of document.compatMode is equal to "BackCompat".

JavaScript code

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

3. Head attribute

As a supplement to the body element of the document referenced by document.body, HTML5 adds a new document.head attribute, so that the head tag can be referenced. The usage method is as follows

JavaScript code

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

Make the compatibility as above. If it can be used, use document.head, otherwise still use the getElementsByTagName() method. The browsers supported by the document.head attribute are Chrome and Safari 5.

HTML5 actual combat and analysis of HTMLDocument changes (readyState attribute, compatibility mode and head attribute) are introduced here. Learn some new knowledge in the midst of your busy schedule. Life is still very fulfilling, and put your learning into practice. I would like to share some little things with you, it was such a magical day. Updates related to HTML5 practice and analysis.

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

4. HTML5 game framework cnGameJS development record-detailed resource loading module code