html5指南（2）-操作Document metadata的詳情介紹-H5教程-PHP中文網

首頁

web前端

H5教程

html5指南（2）-操作Document metadata的詳情介紹

黄舟

Mar 22, 2017 pm 04:01 PM

　　今天的內容是關於如何操作document 物件。

　　1.操作Document Metadata

　　首先我們來看看相關的屬性：

characterSet：取得目前document的編碼方式，此屬性為只讀；

charset：取得或設定目前document的編碼方式；

compatMode：取得目前document的相容模式；

cookie：取得或設定目前document的cookie物件；

defaultCharset：取得瀏覽器預設的編碼方式；

defaultView：取得目前目前document的window物件；

dir：取得或設定目前document的文字對齊方式；

domain：取得或設定目前document的domian值；

implementation：提供所支援的dom特性的資訊；

lastModified：取得document最後的修改時間（如果沒有最後修改時間，則傳回目前時間）；

location：提供目前document的url資訊；

readyState：傳回目前document的狀態，該屬性是唯讀屬性；

referrer：傳回連接到目前document的document url資訊；

title：取得或設定目前document的title。

　　來看下面的範例：

<!DOCTYPE html>
<html>
<head>
    <title>example</title>
</head>
<body>
    <script type="text/javascript">
        document.writeln(&#39;<pre class="brush:php;toolbar:false">&#39;);

        document.writeln(&#39;characterSet:&#39; + document.characterSet);
        document.writeln(&#39;charset:&#39; + document.charset);
        document.writeln(&#39;compatMode:&#39; + document.compatMode);
        document.writeln(&#39;defaultCharset:&#39; + document.defaultCharset);
        document.writeln(&#39;dir:&#39; + document.dir);
        document.writeln(&#39;domain:&#39; + document.domain);
        document.writeln(&#39;lastModified:&#39; + document.lastModified);
        document.writeln(&#39;referrer:&#39; + document.referrer);
        document.writeln(&#39;title:&#39; + document.title);

        document.write(&#39;

');

登入後複製

結果(不同瀏覽器顯示的結果可能不一樣)：

　　# 2.如何理解相容模式

　　compatMode屬性告訴你瀏覽器是如何處理目前document的。有太多不標準的html了，瀏覽器會試圖顯示這些頁面，即使他們不符合html規範。有些內容依賴早先瀏覽器大戰時所存在的獨特的特性，而這些屬性石不符合規範的。 compatMode會傳回一個或兩個值，如下：

CSS1Compat：document符合一個有效的html規格（不一定是html5，驗證的html4頁面同樣傳回這個值）；

BackCompat：document包含不符合規範的特性，觸發了相容模式。

　　3.使用Location物件

　　document.location傳回一個Location對象，向你提供細粒度的document的位址訊息，同時允許你導覽到其他document。

protocol：取得或設定document url的協定；

host：取得或設定document url的主機資訊；

href：取得或設定document的位址資訊；

hostname：取得或設定document的主機名稱；

search：取得或設定document url查詢部分的資訊；

hash：取得或設定document url hash部分的信息;

assign()：導覽至指定url;

replace()：移除目前document，導覽至指定的url；

reload()：重新載入目前document；

resolveURL()：將相對路徑變成絕對路徑。

　　來看下面的範例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        document.writeln(&#39;<pre class="brush:php;toolbar:false">&#39;);

        document.writeln(&#39;protocol:&#39; + document.location.protocol);
        document.writeln(&#39;host:&#39; + document.location.host);
        document.writeln(&#39;hostname:&#39; + document.location.hostname);
        document.writeln(&#39;port:&#39; + document.location.port);
        document.writeln(&#39;pathname:&#39; + document.location.pathname);
        document.writeln(&#39;search:&#39; + document.location.search);
        document.writeln(&#39;hash:&#39; + document.location.hash);

        document.writeln(&#39;

');

登入後複製

結果：

　　4.讀寫cookie

4.讀寫cookie

#　　透過cookie屬性，可以對document的cookie進行新增，修改並讀取操作。如下例：

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" /></head><body>
    <p id="cookiedata">
    </p>
    <button id="write">
        Add Cookie</button>
    <button id="update">
        Update Cookie</button>
    <button id="clear">
        Clear Cookie</button>
    <script type="text/javascript">
        var cookieCount = 0;
        document.getElementById(&#39;update&#39;).onclick = updateCookie;
        document.getElementById(&#39;write&#39;).onclick = createCookie;
        document.getElementById(&#39;clear&#39;).onclick = clearCookie;
        readCookies();        function readCookies() {
            document.getElementById(&#39;cookiedata&#39;).innerHTML = !document.cookie ? &#39;&#39; : document.cookie;
        }        function updateCookie() {
            document.cookie = &#39;cookie_&#39; + cookieCount + &#39;=update_&#39; + cookieCount;
            readCookies();
        }        function createCookie() {
            cookieCount++;
            document.cookie = &#39;cookie_&#39; + cookieCount + &#39;=value_&#39; + cookieCount;
            readCookies();
        }        function clearCookie() {            
        var exp = new Date();
            exp.setTime(exp.getTime() - 1);            
            var arrStr = document.cookie.split("; ");            
            for (var i = 0; i < arrStr.length; i++) {                
            var temp = arrStr[i].split("=");                if (temp[0]) {
                    document.cookie = temp[0] + "=;expires=" + exp.toGMTString();
                };
            }

            cookieCount = 0;
            readCookies();
        }    </script></body></html>

登入後複製

結果：

5.理解ReadyState

　　document.readyState幫助你了解頁面載入和解析過程中，頁面所處的目前狀態。要記住的一點是，瀏覽器當遇到script元素時會立即執行，除非你使用defer屬性延時腳本的執行。 readyState有三個值代表不同的狀態。

loading：瀏覽器正在載入和執行document；

interactive：docuent已經完成解析，但是瀏覽器正在載入其他外部資源（media，圖片等）；

# complete：頁面解析完成，外部資源在家完畢。　　在瀏覽器整個載入和解析的過程中，readyState的值會從loading，interactive和complete逐一改變。當結合readystatechange事件（readyState狀態改變時觸發）使用，readyState會變得相當有價值。

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <script>
        document.onreadystatechange = function () {            
        if (document.readyState == "interactive") {
                document.getElementById("pressme").onclick = function () {
                    document.getElementById("results").innerHTML = "Button Pressed";
                }
            }
        }    </script></head><body>
    <button id="pressme">
        Press Me</button>
    <pre id="results">

登入後複製

　　上面的程式碼使用readystatechange事件實現了延時執行的效果，只有當頁面上整個頁面解析接觸之後readystate的值才會變成interactive，這時再為pressme

按鈕

綁定click事件。這樣操作可以確保所需的

html元素###都存在，防止錯誤發生。 ######　　6.取得dom屬性實作的資訊###

　　document.implementation属性帮助你了解浏览器对dom属性的实现情况。该属性返回DOMImplementation对象，对象包含hasFeature方法，你可以通过该方法了解浏览器对某属性的实现情况。

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" /></head><body>
    <script>
        var features = ["Core", "HTML", "CSS", "Selectors-API"];        
        var levels = ["1.0", "2.0", "3.0"];
        document.writeln("<pre class="brush:php;toolbar:false">");        
        for (var i = 0; i < features.length; i++) {
            document.writeln("Checking for feature: " + features[i]);            
            for (var j = 0; j < levels.length; j++) {
                document.write(features[i] + " Level " + levels[j] + ": ");
                document.writeln(document.implementation.hasFeature(features[i], levels[j]));
            }
        }
        document.write("

登入後複製

效果：