Le contenu d'aujourd'hui concerne la façon de manipuler des objets de document.
1. Métadonnées de document opérant Tout d'abord, jetons un coup d'œil aux attributs connexes:PersonnageSet: Obtenez la méthode de codage du document actuel, et cette propriété 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 l'objet cookie du document actuel;
DefaultCharset: obtenez la méthode de codage par défaut du navigateur;
DefaultView: Obtenez l'objet Window du document actuel;
DIR: Obtenez ou définissez l'alignement du texte du document actuel;
Domaine: Obtenez ou définissez la valeur Doomian du document actuel;
Implémentation: Fournir des informations sur les fonctionnalités DOM prises en charge;
LastModified: Obtenez le dernier temps de modification du document (s'il n'y a pas de dernier temps de modification, il renvoie l'heure actuelle);
Emplacement: fournir des informations URL du document actuel;
ReadyState: renvoie l'état du document actuel, qui est une propriété en lecture seule;
Renvoi: renvoie les informations URL du document connectées au document actuel;
Titre: Obtenez ou définissez le titre du document actuel.
Jetons un coup d'œil à l'exemple suivant:
<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
</ head>
<body>
<script type = "text / javascript">
document.writeln ('<pre>');
Document.Writeln ('PersonnageSet:' + Document.Characterset);
document.writeln ('charse:' + document.charset);
Document.Writeln ('CompatMode:' + document.compatMode);
document.writeln ('defaultCharset:' + document.defaultCharset);
document.writeln ('dir:' + document.dir);
document.writeln ('domaine:' + document.domain);
Document.Writeln ('LastModified:' + document.lastModified);
Document.Writeln ('Referger:' + document.Referrer);
Document.Writeln ('Title:' + document.title);
document.write ('</pre>');
</cript>
</docy>
</html>
Résultats (Les résultats affichés par différents navigateurs peuvent être différents):
2. Comment comprendre le mode de compatibilitéLa propriété CompatMode vous indique comment le navigateur gère le document actuel. Il y a trop de HTML non standard maintenant que le navigateur essaiera d'afficher ces pages même s'ils ne sont pas conformes à la spécification HTML. Un contenu repose sur des fonctionnalités uniques qui existaient dans les guerres de navigateur précédents, et ces pierres d'attribut ne respectent pas la norme. CompatMode renvoie une ou deux valeurs, comme suit:
CSS1COMPAT: Le document est conforme à une spécification HTML valide (pas nécessairement HTML5 / "> HTML5, la page HTML4 vérifiée renvoie également cette valeur);
BackCompat: Le document contient des fonctionnalités qui ne sont pas conformes aux spécifications, déclenchant le mode de compatibilité.
3. Utilisez l'objet de localisationDocument.Location renvoie un objet de localisation, vous fournissant les informations d'adresse du document à grain fin et vous permettant de naviguer vers d'autres documents.
Protocole: Obtenez ou définissez le protocole pour l'URL du document;
Hôte: obtenir ou définir les informations de l'hôte de l'URL du document;
HREF: obtenir ou définir les informations d'adresse du document;
Nom d'hôte: Obtenez ou définissez le nom d'hôte du document;
Recherche: obtenir ou définir les informations de la pièce de requête URL du document;
Hash: Obtenez ou définissez les informations sur la pièce de hachage de l'URL du document;
attribuer (<URL>): accéder à une URL spécifiée;
remplacer (<URL>): supprimer le document actuel et accéder à l'URL spécifiée;
recharger (): recharger le document actuel;
ResolveUrl (<URL>): modifiez le chemin relatif vers un chemin absolu.
Jetons un coup d'œil à l'exemple suivant :<! 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">
<adal>
<Title> </Title>
</ head>
<body>
<script type = "text / javascript">
document.writeln ('<pre>');
Document.Writeln ('Protocole:' + document.location.protocol);
document.writeln ('hôte:' + document.location.host);
document.writeln ('hostname:' + document.location.hostname);
document.writeln ('port:' + document.location.port);
Document.Writeln ('pathname:' + document.location.pathname);
Document.Writeln ('Search:' + document.Location.Search);
document.writeln ('hash:' + document.location.hash);
document.writeln ('</pre>');
</cript>
</docy>
</html>
résultat:
4. Lire et écrire des cookies Grâce à l'attribut Cookie, vous pouvez ajouter, modifier et lire les cookies dans le document. Comme indiqué dans l'exemple suivant:<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
<méta name = "auteur" contenu = "Adam Freeman" />
<meta name = "Description" content = "Un exemple simple" />
</ head>
<body>
<p id = "Cookiedata">
</p>
<bouton id = "write">
Ajouter le cookie </futch>
<Button id = "Update">
Mettre à jour le cookie </futh>
<bouton id = "clear">
Effacer le cookie </fruts>
<script type = "text / javascript">
var Cookiecount = 0;
document.getElementById ('Update'). OnClick = UpdateCookie;
document.getElementById ('write'). onClick = CreateCookie;
document.getElementById ('Clear'). OnClick = clearcookie;
Readcookies ();
fonction readcookies () {
document.getElementById ('Cookiedata'). innerHtml =! document.cookie? '': document.cookie;
}
fonction updateCookie () {
document.cookie = 'cookie_' + Cookiecount + '= Update_' + Cookiecount;
Readcookies ();
}
fonction createCookie () {
Cookiecount ++;
document.cookie = 'cookie_' + Cookiecount + '= value_' + Cookiecount;
Readcookies ();
}
fonction clearcookie () {
var exp = new Date ();
exp.setTime (exp.getTime () - 1);
var arrstr = document.cookie.split (";");
pour (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 ();
}
</cript>
</docy>
</html>
résultat:
5. Comprendre ReadyStateDocument.readyState vous aide à comprendre l'état actuel de la page pendant le processus de chargement et d'analyse de la page. Une chose à retenir est que le navigateur s'exécutera immédiatement lors de la rencontre d'un élément de script, sauf si vous utilisez l'attribut de repère pour retarder l'exécution du script. ReadyState a trois valeurs représentant différents états.
Chargement: le navigateur charge et exécute un 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 terminées à la maison.
Au cours de l'ensemble du processus de chargement et d'analyse du navigateur, la valeur de ReadyState changera une par une depuis le chargement, l'interaction et la complète. Lorsqu'il est utilisé conjointement avec l'événement ReadyStateChange (déclenché lorsque l'état ReadyState change), ReadyState devient très précieux.
<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
<méta name = "auteur" contenu = "Adam Freeman" />
<meta name = "Description" content = "Un exemple simple" />
<cript>
document.onreadystateChange = function () {
if (document.readystate == "interactif") {
document.getElementById ("PressMe"). OnClick = fonction () {
document.getElementById ("Résultats"). InnerHtml = "Button appuyé";
}
}
}
</cript>
</ head>
<body>
<Button id = "PressMe">
Appuyez sur moi </fruton>
<pre id = "Results"> </ Pre>
</docy>
</html>
Le code ci-dessus utilise l'événement ReadyStateChange pour réaliser l'effet de l'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 prêt à l'emploi deviendra interactive. À l'heure actuelle, l'événement Click sera lié au bouton PressMe. Cette opération garantit que tous les éléments HTML requis existent et empêchent les erreurs de se produire.
6. Obtenez des informations sur l'implémentation des attributs DOMLa propriété Document.IMPLIMATION vous aide à comprendre l'implémentation par le navigateur de la propriété DOM. Cette propriété renvoie un objet de domicile, qui contient une méthode HasFeature, à travers laquelle vous pouvez comprendre l'implémentation par le navigateur d'une certaine propriété.
<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
<méta name = "auteur" contenu = "Adam Freeman" />
<meta name = "Description" content = "Un exemple simple" />
</ head>
<body>
<cript>
var fonctionnalités = ["core", "html", "css", "sélecteurs-api"];
var niveaux = ["1.0", "2.0", "3.0"];
document.writeln ("<pre>");
pour (var i = 0; i <fonctionnalités.length; i ++) {
Document.Writeln ("Vérification de la fonctionnalité:" + fonctionnalités [i]);
pour (var j = 0; j <niveaux.length; j ++) {
Document.Write (fonctionnalités [i] + "niveau" + niveaux [j] + ":");
document.writeln (document.implementation.hasFeature (fonctionnalités [i], niveaux [j]));
}
}
document.write ("</pre>")
</cript>
</docy>
</html>
Effet: