首頁 > web前端 > H5教程 > 主體

HTML5實戰與剖析之HTMLDocument變化

黄舟
發布: 2017-05-25 15:21:52
原創
2062 人瀏覽過

  之前為大家介紹了些許關於HTML5新添加的小東東,想必大家也有所了解了。今天要為大家介紹HTML5中有關HTMLDocument方面新加入的內容。那麼HTML5中有關HTMLDocument方面新加入的內容都有什麼呢?HTML5中有關HTMLDocument方面新加入的內容有readyState屬性、相容模式判斷和head屬性。下面就為大家一一介紹這些新加入的小東東吧。

 1、readyState屬性

  早在IE4時代的時候,document物件就引入了readyState屬性了,但是一直都沒有納入標準,如今,在HTML5的時代了,就納入規範了。 readyState屬性有兩個可能的值:

  (1)loadding,正在加載文檔

  (2)complete,已經加載完文檔

  如何才能恰當的使用document.read完文檔

  如何才能恰當的使用document.ready4dument.ready?就是透過它來實現一個指示文檔已經載入完成的指示器。在這個屬性得到廣泛支援之前,要實作這樣一個指示器,還是必須需要onload事件處理程序設定一個標籤,表示文件已經載入完畢。下例子如下

  HTML程式碼

<p>梦龙小站</p>
<p class="complete"></p>
登入後複製

  JavaScript程式碼

<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++ )
	}
};
登入後複製

  < HTML5實戰與剖析之HTMLDocument變化
  IE6之後就開始區分渲染頁的模式了,分為標準的和混雜的,偵測頁面的相容模式就成為瀏覽器的必要功能。 IE為此為document增加了一個名為compatMode的屬性,這個屬性就是為了告訴開發人員瀏覽器用了哪一種渲染模式。就像下面的小例子中所展示的那樣,在標準模式下,document.compatMode的值等於”CSS1Compat”,而在混雜模式下,document.compatMode的值等於”BackCompat”。

  JavaScript程式碼

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

  3、Head屬性

  作為對document.body,所以引用文檔的body元素的,就可以引用了這樣元素的標籤。使用方法如下

  JavaScript程式碼
var head = document.head || document.getElementsByTagName("head")[0];
登入後複製
  就像上面那樣做一下相容,如果可以用的話,就是用document.head,否則仍然使用getElementsByTagName()方法。 document.head屬性支援的瀏覽器有Chrome和safari 5。

  HTML5實戰與剖析之HTMLDocument變化(readyState屬性、兼容模式和head屬性)就為大家介紹到這裡,在百忙當中學習一下新的小知識,生活還是很充實的,並把學習的一些小東東和大家分享一下,那簡直的神仙般的日子了。 HTML5實戰與剖析的相關更新。

【相關推薦】

1. 

免費h5線上影片教學

2. 

HTML5 完整版手冊

cn實錄-資源載入模組程式碼詳解

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板