Guide HTML5 (2) - Introduction détaillée au fonctionnement des métadonnées du document-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

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

黄舟

Mar 22, 2017 pm 04:01 PM

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;

');

Copier après la connexion

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() : Accédez à une URL spécifiée

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

reload() : Rechargez le document actuel

resolveURL() : 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;

');

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

效果：

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 de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7467

Tutoriel CakePHP

1376

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Le document GTA 6 donne un aperçu détaillé de toutes les fuites Sep 08, 2024 am 06:37 AM

Le 3 septembre sort la version 1.5 du document Grand Theft Auto VI qui donne un aperçu détaillé de tout ce que l'on sait sur le jeu à ce jour. La version mise à jour du document a été annoncée dans une bande-annonce publiée sur X (anciennement Twitter).???

See all articles