HTML5擴充套件了 HTMLDocument ,增加了新的功能。

前端精髓發表於2017-09-18

HTML5擴充套件了 HTMLDocument ,增加了新的功能。與HTML5中新增的其他DOM擴充套件類似,這些變化同樣基於那些已經得到很多瀏覽器完美支援的專有擴充套件。所以,儘管這些擴充套件被寫入標準的時間相對不長,但很多瀏覽器很早就已經支援這些功能了。

1.  readyState 屬性

IE4最早為 document 物件引入了 readyState 屬性。然後,其他瀏覽器也都陸續新增這個屬性,最終HTML5把這個屬性納入了標準當中。Document 的 readyState 屬性有兩個可能的值:

  • loading ,正在載入文件;
  • complete ,已經載入完文件。

使用 document.readyState 的最恰當方式,就是通過它來實現一個指示文件已經載入完成的指示器。在這個屬性得到廣泛支援之前,要實現這樣一個指示器,必須藉助onload 事件處理程式設定一個標籤,表明文件已經載入完畢。
 document.readyState屬性的基本用法如下。

JS

if (document.readyState == “complete”){
    //執行操作
}

支援 readyState 屬性的瀏覽器有IE4+、Firefox 3.6+、Safari、Chrome和Opera 9+。

2. 相容模式

自從IE6開始區分渲染頁面的模式是標準的還是混雜的,檢測頁面的相容模式就成為瀏覽器的必要功能。IE為此給 document 新增了一個名為 compatMode 的屬性,這個屬性就是為了告訴開發人員瀏覽器採用了哪種渲染模式。就像下面例子中所展示的那樣,
在標準模下, document.compatMode 的值等於 “CSS1Compat” ,
而在混雜模式下, document.compatMode 的值等於 “BackCompat” 。

JS

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> 元素,可以結合使用這個屬性和另一種後備方法。

JS

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

如果可用,就使用 document.head ,否則仍然使用 getElementsByTagName() 方法。

實現 document.head 屬性的瀏覽器包括Chrome和Safari 5。

相關文章