HTML5 ガイド (2) - ドキュメントメタデータの操作の詳細な紹介-H5 チュートリアル-php.cn

HTML5 ガイド (2) - ドキュメントメタデータの操作の詳細な紹介

黄舟

リリース： 2017-03-22 16:01:40

オリジナル

1609 人が閲覧しました

今日の内容はドキュメントオブジェクトの操作方法についてです。

1. ドキュメントのメタデータを操作する

まず、関連する属性を見てみましょう:

characterSet: 現在のドキュメントのエンコード方法を取得します。この属性は読み取り専用です。

charset:現在のドキュメントのエンコーディングメソッド;

compatMode: 現在のドキュメントの互換性モードを取得します。

cookie: 現在のドキュメントの Cookie オブジェクトを取得または設定します。

defaultView:現在のドキュメントのウィンドウオブジェクトを取得します。

dir: 現在のドキュメントのテキスト配置を取得または設定します。

domain: 現在のドキュメントの domian 値を取得または設定します。

implementation: サポートされている dom 機能に関する情報を提供します。 ;

lastModified: ドキュメントの最終変更時刻を取得します (最終変更時刻がない場合は、現在の時刻が返されます);

location: 現在のドキュメントの URL 情報を提供します。現在のドキュメントの場合、この属性は読み取り専用属性です。

referrer: 現在のドキュメントの URL 情報に接続されているドキュメントを返します。

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 属性は、ブラウザがどのように処理するかを示します。の現在の文書。世の中には非標準の HTML が大量に存在するため、ブラウザは HTML 仕様に準拠していないにもかかわらず、これらのページを表示しようとします。一部のコンテンツはブラウザ戦争の初期に存在していた独自の機能に依存しており、これらのプロパティは仕様に準拠していません。 compatMode は、次のように 1 つまたは 2 つの値を返します: CSS1Compat: ドキュメントは有効な HTML 仕様に準拠しています (必ずしも

html5

ではなく、検証された html4 ページもこの値を返します)。

BackCompat: ドキュメントには準拠していないものが含まれています。機能、互換モードをトリガーします。

3. Location オブジェクトを使用する

Document.location は Location オブジェクトを返し、ドキュメントの詳細なアドレス情報を提供し、他のドキュメントに移動できるようにします。 protocol: ドキュメント URL のプロトコルを取得または設定します。

host: ドキュメント URL のホスト情報を取得または設定します。

hostname: ドキュメントのアドレス情報を取得または設定します。ドキュメントのホスト名;

search: ドキュメント URL のクエリ部分の情報を取得または設定します。

hash: ドキュメント URL のハッシュ部分の情報を取得または設定します。

assign(

replace(

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 の読み取りと書き込み

Cookie 属性を使用して、ドキュメントの 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>

ログイン後にコピー

Result:

5. ReadyStateを理解する

document.readyStateは、ページの読み込みと解析中のページの現在の状態を理解するのに役立ちます。覚えておくべきことの 1 つは、 defer 属性を使用してスクリプトの実行を遅らせない限り、ブラウザーは script 要素を見つけるとすぐにそれを実行するということです。 readyState には、さまざまな状態を表す 3 つの値があります。

loading: ブラウザはドキュメントをロードして実行しています。

interactive: ドキュメントの解析は完了しましたが、ブラウザは他の外部リソース (メディア、画像など) をロードしています。 complete: ページの解析が完了しました。外部リソースは自宅で完結します。

ブラウザーの読み込みと解析のプロセス全体で、readyState の値は読み込み、対話型、完了の順に 1 つずつ変化します。 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 値が pressme にバインドされます。ボタン

。この操作により、必要な

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("

ログイン後にコピー

效果：