Maison >interface Web >Tutoriel H5 >Guide HTML5 (2) - Introduction détaillée au fonctionnement des métadonnées du document

Guide HTML5 (2) - Introduction détaillée au fonctionnement des métadonnées du document

黄舟original: 2017-03-22 16:01:401674parcourir

Le contenu d'aujourd'hui porte sur la façon d'utiliser le document objet .

　1. Manipuler les métadonnées du document

Tout d'abord, jetons un coup d'œil aux attributs associés :

characterSet : Obtenez la méthode d'encodage du document actuel. . Cet attribut est en lecture seule ;

charset : obtenez ou définissez la méthode d'encodage du document actuel

compatMode : obtenez le mode de compatibilité du document actuel ; cookie : Obtenez ou définissez le cookie du document actuel. Objet ;

defaultCharset : Obtenez la méthode d'encodage par défaut du navigateur

defaultView : Obtenez l'objet fenêtre du document actuel ; >dir : obtenez ou définissez l'alignement du texte du document actuel. Méthode ;

domaine : obtenez ou définissez la valeur domian du document actuel

implémentation : fournissez des informations sur les fonctionnalités dom prises en charge ; 🎜>

lastModified : obtenez l'heure de la dernière modification du document (s'il n'y a pas d'heure de dernière modification, l'heure actuelle est renvoyée)

emplacement : fournit les informations URL du document actuel ; >

readyState : renvoie l'état du document actuel. Cet attribut est un attribut en lecture seule ;

referrer : renvoie les informations sur l'URL du document connecté au document actuel ;

titre : Obtient ou définit le titre du document actuel.

Regardons l'exemple suivant :

Résultat (différents navigateurs peuvent afficher des résultats différents) :

<!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. Comment comprendre le mode de compatibilité

　 L'attribut compatMode vous indique comment le navigateur gère le document actuel. Il existe tellement de HTML non standard que les navigateurs essaieront d'afficher ces pages même si elles ne sont pas conformes à la spécification HTML. Certains contenus reposent sur des fonctionnalités uniques qui existaient au début de la guerre des navigateurs, et ces propriétés ne sont pas conformes aux spécifications. compatMode renverra une ou deux valeurs, comme suit :

CSS1Compat : le document est conforme à une spécification html valide (pas nécessairement html5, les pages html4 vérifiées renvoient également cette valeur

BackCompat : Le document contient des fonctionnalités non conformes à la spécification, déclenchant le mode de compatibilité.

3. Utilisez l'objet Location

Document.location renvoie un objet Location, vous fournissant des informations d'adresse précises du document et vous permettant de naviguer vers d'autres documents.

protocole : obtenez ou définissez le protocole de l'URL du document ;

host : obtenez ou définissez les informations d'hôte de l'URL du document

href : obtenez ou définissez l'adresse ; informations du document ;

nom d'hôte : obtenez ou définissez le nom d'hôte du document ;

recherche : obtenez ou définissez les informations dans la partie requête de l'URL du document ; >hash : Obtenez ou définissez les informations dans la partie de hachage de l'URL du document ;

assign(9bb6a7d109b3f2bf35f7e2e9bd87f98a) : Accédez à une URL spécifiée

replace(9bb6a7d109b3f2bf35f7e2e9bd87f98a) : Supprimez le document actuel et accédez à l'URL spécifiée ;

reload() : Rechargez le document actuel

resolveURL(9bb6a7d109b3f2bf35f7e2e9bd87f98a) : Changez le chemin relatif en chemin absolu.

Regardez l'exemple suivant :

Résultat :

Lire et écrire des cookies

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

');

Grâce à l'attribut cookie, vous pouvez ajouter, modifier et lire le cookie du document. Par exemple :

Résultat :

5. Comprendre ReadyState

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

document.readyState vous aide Comprenez l’état actuel de la page pendant le chargement et l’analyse de la page. Une chose à retenir est que le navigateur exécutera l'élément de script immédiatement lorsqu'il le rencontrera, à moins que vous n'utilisiez l'attribut defer pour retarder l'exécution du script. readyState a trois valeurs représentant différents états.

chargement : le navigateur charge et exécute le document ;

interactif : le document a terminé l'analyse, mais le navigateur charge d'autres ressources externes (médias, images, etc.) ; >

terminé : l'analyse de la page est terminée et les ressources externes sont complétées à la maison. Pendant tout le processus de chargement et d'analyse du navigateur, la valeur de readyState changera une par une à partir du chargement, interactif et complet. Lorsqu'il est utilisé conjointement avec l'événement readystatechange (déclenché lorsque l'état readyState change), readyState deviendra très précieux.

Le code ci-dessus utilise l'événement readystatechange pour obtenir l'effet d'exécution retardée. Ce n'est que lorsque la page entière de la page est analysée et contactée que la valeur readystate devient interactive. 🎜> Bouton

Lier l'événement de clic. Cette opération peut garantir que les

éléments HTML

requis sont présents et éviter que des erreurs ne se produisent.

6. Obtenez des informations sur la mise en œuvre de l'attribut 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("

效果：

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une explication détaillée du téléchargement d'images HTML5 prend en charge la compression de l'aperçu de l'image et l'affichage de la progression. Compatible avec IE6 et les navigateurs standard.Article suivant：Une explication détaillée du téléchargement d'images HTML5 prend en charge la compression de l'aperçu de l'image et l'affichage de la progression. Compatible avec IE6 et les navigateurs standard.

Articles Liés

Voir plus