Heim > Artikel > Web-Frontend > HTML5-Leitfaden (2) – Detaillierte Einführung in die Bedienung von Dokumentmetadaten

HTML5-Leitfaden (2) – Detaillierte Einführung in die Bedienung von Dokumentmetadaten

黄舟Original: 2017-03-22 16:01:401525Durchsuche

Der heutige Inhalt befasst sich mit der Bedienung des Dokuments Objekts .

　1. Dokumentmetadaten bearbeiten

Schauen wir uns zunächst die zugehörigen Attribute an:

characterSet: Ruft die Kodierungsmethode des aktuellen Dokuments ab . Dieses Attribut ist schreibgeschützt.

charset: Ruft die Kodierungsmethode des aktuellen Dokuments ab.

compatMode: Ruft den Kompatibilitätsmodus des aktuellen Dokuments ab Cookie: Holen Sie sich das Cookie des aktuellen Dokuments.

defaultCharset: Holen Sie sich die Standardcodierungsmethode des Browsers.

>dir: Die Textausrichtung des aktuellen Dokuments abrufen oder festlegen. Methode;

domain: Den domian-Wert des aktuellen Dokuments abrufen oder festlegen.

implementierung: Informationen zu unterstützten dom-Funktionen bereitstellen 🎜>

lastModified: Ruft die letzte Änderungszeit des Dokuments ab (Wenn es keine letzte Änderungszeit gibt, wird die aktuelle Zeit zurückgegeben

location: Stellt die URL-Informationen des aktuellen Dokuments bereit

readyState: Gibt den Status des aktuellen Dokuments zurück

Referrer: Gibt die mit dem aktuellen Dokument verbundenen Dokument-URL zurück; Ruft den Titel des aktuellen Dokuments ab oder legt diesen fest.

Schauen wir uns das folgende Beispiel an:

Ergebnis (verschiedene Browser zeigen möglicherweise unterschiedliche Ergebnisse an):

<!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. So verstehen Sie den Kompatibilitätsmodus

　 Das Attribut „compatMode“ sagt Ihnen, wie der Browser mit dem aktuellen Dokument umgeht. Es gibt so viel nicht standardmäßiges HTML, dass Browser versuchen, diese Seiten anzuzeigen, obwohl sie nicht der HTML-Spezifikation entsprechen. Einige Inhalte basieren auf einzigartigen Funktionen, die es während der frühen Browserkriege gab, und diese Eigenschaften sind nicht spezifikationskonform. compatMode gibt einen oder zwei Werte wie folgt zurück:

CSS1Compat: Dokument entspricht einer gültigen HTML-Spezifikation (nicht unbedingt

html5, verifizierte HTML4-Seiten geben diesen Wert ebenfalls zurück); 🎜>BackCompat: Das Dokument enthält Funktionen, die nicht der Spezifikation entsprechen und den Kompatibilitätsmodus auslösen.

3. Verwenden Sie das Location-Objekt

Document.location gibt ein Location-Objekt zurück, das Ihnen detaillierte Adressinformationen des Dokuments liefert und Ihnen die Navigation zu anderen Dokumenten ermöglicht Unterlagen.

Protokoll: Protokoll der Dokument-URL abrufen oder festlegen;

Host: Host-Informationen der Dokument-URL abrufen oder festlegen;

href: Adresse abrufen oder festlegen Informationen zum Dokument;

Hostname: Abrufen oder Festlegen des Hostnamens des Dokuments

Suchen: Abrufen oder Festlegen der Informationen im Abfrageteil der Dokument-URL; >hash: Informationen im Hash-Teil der Dokument-URL abrufen oder festlegen;

assign(9bb6a7d109b3f2bf35f7e2e9bd87f98a): Navigieren Sie zu einer angegebenen URL;

replace(9bb6a7d109b3f2bf35f7e2e9bd87f98a) : Entfernen Sie das aktuelle Dokument und navigieren Sie zur angegebenen URL;

reload(): Laden Sie das aktuelle Dokument neu

resolveURL(9bb6a7d109b3f2bf35f7e2e9bd87f98a): Ändern Sie den relativen Pfad in einen absoluten Pfad.

Sehen Sie sich das folgende Beispiel an:

Ergebnis:

Cookies lesen und schreiben

Über das Cookie-Attribut können Sie das Cookie des Dokuments hinzufügen, ändern und lesen. Zum Beispiel:

<!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;

');

Ergebnis:

5. ReadyState verstehen

document.readyState hilft Ihnen Verstehen Sie den aktuellen Status der Seite während des Ladens und Parsens der Seite. Beachten Sie, dass der Browser das Skriptelement sofort ausführt, wenn er darauf trifft, es sei denn, Sie verwenden das Defer-Attribut, um die Ausführung des Skripts zu verzögern. readyState verfügt über drei Werte, die unterschiedliche Zustände darstellen.

<!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>

Laden: Der Browser lädt und führt das Dokument aus.

Interaktiv: Das Dokument wurde vollständig analysiert, aber der Browser lädt andere externe Ressourcen (Medien, Bilder usw.); > abgeschlossen: Die Seitenanalyse ist abgeschlossen und die externen Ressourcen werden zu Hause fertiggestellt.

Während des gesamten Lade- und Analysevorgangs des Browsers ändert sich der Wert von readyState nacheinander vom Laden, Interaktiv und Vollständig. Bei Verwendung in Verbindung mit dem Ereignis „readystatechange“ (ausgelöst, wenn sich der Status von „readyState“ ändert) wird „readyState“ sehr wertvoll.

Der obige Code verwendet das Ereignis „readystatechange“, um den Effekt einer verzögerten Ausführung zu erzielen. Erst wenn die gesamte Seite auf der Seite analysiert und kontaktiert wird, wird der Wert „readystate“ interaktiv 🎜>Schaltfläche

Klickereignis binden. Durch diesen Vorgang kann sichergestellt werden, dass die erforderlichen

HTML-Elemente

vorhanden sind, und das Auftreten von Fehlern verhindert werden.

6. Informieren Sie sich über die Implementierung des Dom-Attributs

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

效果：

Das obige ist der detaillierte Inhalt vonHTML5-Leitfaden (2) – Detaillierte Einführung in die Bedienung von Dokumentmetadaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des HTML5-Bild-Uploads unterstützt die Bildvorschau-Komprimierung und Fortschrittsanzeige. Kompatibel mit IE6 und Standardbrowsern.Nächster Artikel：Detaillierte Erläuterung des HTML5-Bild-Uploads unterstützt die Bildvorschau-Komprimierung und Fortschrittsanzeige. Kompatibel mit IE6 und Standardbrowsern.

In Verbindung stehende Artikel

Mehr sehen