In den heutigen Inhalten geht es darum, wie Dokumentobjekte manipuliert werden können.
1. Dokument Metadaten betreiben Schauen wir uns zunächst die damit verbundenen Attribute an:Charaktere: Holen Sie sich die Codierungsmethode des aktuellen Dokuments, und diese Eigenschaft ist schreibgeschützt.
charSet: Holen Sie sich die Codierungsmethode des aktuellen Dokuments oder setzen Sie oder setzen Sie sie.
Compatmode: Holen Sie sich den Kompatibilitätsmodus des aktuellen Dokuments.
Cookie: Holen Sie sich das Cookie -Objekt des aktuellen Dokuments;
DefaultCharSet: Nehmen Sie die Standard -Codierungsmethode des Browsers ab.
DefaultView: Holen Sie sich das Fensterobjekt des aktuellen Dokuments.
DIR: Holen Sie sich die Textausrichtung des aktuellen Dokuments oder setzen Sie sie fest;
Domäne: Holen Sie sich den domianischen Wert des aktuellen Dokuments oder setzen Sie sie.
Implementierung: Geben Sie Informationen zu den unterstützten DOM -Funktionen an.
LastModified: Holen Sie sich die letzte Änderungszeit des Dokuments (wenn es keine letzte Änderungszeit gibt, gibt es die aktuelle Zeit zurück);
Ort: Geben Sie URL -Informationen zum aktuellen Dokument an.
ReadyState: Gibt den Status des aktuellen Dokuments zurück, bei dem es sich um eine schreibgeschützte Eigenschaft handelt.
Referrer: Gibt die mit dem aktuellen Dokument verbundenen Dokument -URL -Informationen zurück.
Titel: Holen Sie sich oder setzen Sie den Titel des aktuellen Dokuments.
Schauen wir uns das folgende Beispiel an:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<script type = "text/javaScript">
document.WriteLn ('<pre>');
document.WriteLn ('Charaktere:' + document.characterset);
document.WriteLn ('charset:' + document.charSet);
document.writeln ('compatmode:' + document.compatmode);
document.WriteLN ('defaultCharSet:' + document.DefaultCharSet);
document.WriteLn ('Dir:' + document.dir);
document.WriteLn ('Domain:' + document.domain);
document.WriteLn ('lastModified:' + document.lastModified);
document.WriteLN ('Referrer:' + document.Referrer);
document.WriteLn ('title:' + document.title);
document.write ('</pre>');
</script>
</body>
</html>
Ergebnisse (die Ergebnisse verschiedener Browser können unterschiedlich sein):
2. wie man den Kompatibilitätsmodus verstehtDie Compatmode -Eigenschaft gibt an, wie der Browser das aktuelle Dokument umgeht. Es gibt zu viele nicht standardmäßige HTML, da der Browser versucht, diese Seiten anzuzeigen, auch wenn er der HTML-Spezifikation nicht entspricht. Einige Inhalte basieren auf einzigartigen Funktionen, die in den früheren Browserkriegen vorhanden waren, und diese Attributsteine entsprechen nicht der Norm. Compatmode gibt wie folgt ein oder zwei Werte zurück:
CSS1COMPAT: Das Dokument entspricht einer gültigen HTML -Spezifikation (nicht unbedingt HTML5/"> HTML5, die verifizierte HTML4 -Seite gibt diesen Wert ebenfalls zurück);
Rückkompat: Das Dokument enthält Funktionen, die den Spezifikationen nicht entsprechen und den Kompatibilitätsmodus auslösen.
3. Verwenden Sie Standortobjektdocument.location gibt ein Standortobjekt zurück, das Ihnen die Adressinformationen des feinkörnigen Dokuments bereitstellt und Sie zu anderen Dokumenten navigieren können.
Protokoll: Holen Sie sich das Protokoll für die Dokument -URL;
Host: Holen Sie sich die Hostinformationen der Dokument -URL;
HREF: Holen Sie sich die Adressinformationen des Dokuments oder setzen Sie sie fest;
Hostname: Holen Sie sich oder setzen Sie den Hostnamen des Dokuments;
Suche: Holen Sie sich die Informationen des Dokument -URL -Abfrageteils;
Hash: Holen Sie sich die Informationen zum Dokument -URL -Hash -Teil;
zuweisen (<URL>): Navigieren Sie zu einer angegebenen URL;
Ersetzen (<URL>): Entfernen Sie das aktuelle Dokument und navigieren Sie zur angegebenen URL.
reload (): das aktuelle Dokument neu laden;
Resolveurl (<URL>): Ändern Sie den relativen Pfad auf einen absoluten Pfad.
Schauen wir uns das folgende Beispiel an :<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> </title>
</head>
<body>
<script type = "text/javaScript">
document.WriteLn ('<pre>');
document.WriteLn ('Protokoll:' + document.location.Protocol);
document.WriteLn ('Host:' + 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>');
</script>
</body>
</html>
Ergebnis:
4. Lesen und schreiben Kekse Durch das Cookie -Attribut können Sie Cookies im Dokument hinzufügen, ändern und lesen. Wie im folgenden Beispiel gezeigt:<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<meta name = "Autor" content = "Adam Freeman" />
<meta name = "Beschreibung" content = "Ein einfaches Beispiel" />
</head>
<body>
<p id = "cookedata">
</p>
<button id = "write">
Fügen Sie Cookie </button> hinzu
<button id = "update">
Cookie </button> aktualisieren
<button id = "löschen">
Cookie </button> löschen
<script type = "text/javaScript">
var CookieCount = 0;
document.getElementById ('update'). onclick = updateCookie;
document.getElementById ('write'). onclick = CreateCookie;
document.getElementById ('Clear'). onclick = Clearcookie;
Readcookies ();
Funktion Readcookies () {
document.getElementById ('cookedata'). Innerhtml =! document.cookie? '': document.cookie;
}
Funktion updatecookie () {
document.cookie = 'cookie_' + cookiecount + '= update_' + cookiecount;
Readcookies ();
}
Funktion CreateCookie () {
CookieCount ++;
document.cookie = 'cookie_' + cookiecount + '= value_' + cookiecount;
Readcookies ();
}
Funktion clearcookie () {
var exp = neues Datum ();
exp.settime (exp.getTime () - 1);
var arrstr = document.cookie.split (";");
für (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>
Ergebnis:
5. Readystate verstehenDokument.ReadyState hilft Ihnen, den aktuellen Status der Seite während des Lade- und Parsingprozesses der Seite zu verstehen. Eine Sache, die Sie erinnern sollten, ist, dass der Browser bei der Begegnung mit einem Skriptelement sofort ausgeführt wird, es sei denn, Sie verwenden das Defer -Attribut, um die Ausführung des Skripts zu verzögern. ReadyState hat drei Werte, die verschiedene Zustände darstellen.
Laden: Der Browser lädt und führt ein Dokument aus;
Interaktiv: Das Dokument hat die Parsen abgeschlossen, aber der Browser lädt andere externe Ressourcen (Medien, Bilder usw.);
Vervollständig: Die Seite an der Seite ist abgeschlossen und externe Ressourcen werden zu Hause abgeschlossen.
Während des gesamten Browser -Laden- und Parsenprozesses ändert sich der Wert von ReadyState nacheinander durch das Laden, Interagieren und Vervollständigen. In Verbindung mit dem Ereignis von ReadyStatechange (ausgelöst, wenn sich der ReadyState -Status ändert), wird ReadyState sehr wertvoll.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<meta name = "Autor" content = "Adam Freeman" />
<meta name = "Beschreibung" content = "Ein einfaches Beispiel" />
<Script>
document.onReadyStatechange = function () {
if (document.readystate == "interaktiv") {
document.getElementById ("pressMe"). onclick = function () {
document.getElementById ("Ergebnisse"). Innerhtml = "Taste gedrückt";
}
}
}
</script>
</head>
<body>
<button id = "drücken">
Drücken Sie mich </button>
<pre id = "Ergebnisse"> </pre>
</body>
</html>
Der obige Code verwendet das Ereignis von ReadyStatechange, um den Effekt einer verzögerten Ausführung zu erreichen. Nur wenn die gesamte Seite auf der Seite analysiert und kontaktiert wird, wird der ReadyState -Wert interaktiv. Zu diesem Zeitpunkt wird das Klickereignis an die Taste PressME gebunden. Diese Operation stellt sicher, dass alle erforderlichen HTML -Elemente existieren und Fehler verhindert.
6. Informationen zur Implementierung von DOM -Attribut erhaltenDas Dokument.implementationseigenschaft hilft Ihnen, die Implementierung der DOM -Eigenschaft durch den Browser zu verstehen. Diese Eigenschaft gibt ein Domimplementation -Objekt zurück, das eine HasFeature -Methode enthält, über die Sie die Implementierung einer bestimmten Eigenschaft durch den Browser verstehen können.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<meta name = "Autor" content = "Adam Freeman" />
<meta name = "Beschreibung" content = "Ein einfaches Beispiel" />
</head>
<body>
<Script>
var features = ["Core", "HTML", "CSS", "Selectors-api"];
Var -Ebenen = ["1.0", "2,0", "3.0"];
document.WriteLn ("<pre>");
für (var i = 0; i <features.length; i ++) {
document.writeeln ("Überprüfung nach Funktion:" + Funktionen [i]);
für (var j = 0; j <Levels.length; j ++) {
document.write (Funktionen [i] + "Ebene" + Ebenen [j] + ":");
document.Writeeln (document.implementation.hasFeature (Funktionen [i], Ebenen [j]));
}
}
document.write ("</pre>")
</script>
</body>
</html>
Wirkung: