El contenido de hoy es sobre cómo manipular objetos de documentos.
1. Operar metadatos del documento Primero, echemos un vistazo a los atributos relacionados:Características: Obtenga el método de codificación del documento actual, y esta propiedad es de solo lectura;
Charset: obtenga o establezca el método de codificación del documento actual;
CompatMode: Obtenga el modo de compatibilidad del documento actual;
Cookie: obtenga o configure el objeto de cookie del documento actual;
DefaultCharset: obtenga el método de codificación predeterminado del navegador;
DefaultView: obtenga el objeto de ventana del documento actual;
Dir: Obtenga o establezca la alineación de texto del documento actual;
Dominio: obtenga o establezca el valor domian del documento actual;
Implementación: proporcione información sobre las características DOM compatibles;
LastModified: Obtenga el último tiempo de modificación del documento (si no hay último tiempo de modificación, devuelve la hora actual);
Ubicación: proporcionar información de URL del documento actual;
ReadyState: Devuelve el estado del documento actual, que es una propiedad de solo lectura;
Referente: Devuelve la información de URL del documento conectada al documento actual;
Título: Obtenga o establezca el título del documento actual.
Echemos un vistazo al siguiente ejemplo:
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
</ablo>
<Body>
<script type = "text/javaScript">
document.writeln ('<pre>');
document.writeLn ('caracteresSet:' + 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 ('referente:' + document.referrer);
document.writeLn ('Título:' + document.title);
document.write ('</pre>');
</script>
</body>
</html>
Resultados (los resultados que se muestran por diferentes navegadores pueden ser diferentes):
2. Cómo entender el modo de compatibilidadLa propiedad CompatMode le dice cómo el navegador maneja el documento actual. Hay demasiados HTML no estándar ahora que el navegador intentará mostrar estas páginas incluso si no cumplen con la especificación HTML. Algunos contenidos se basan en características únicas que existían en las guerras anteriores del navegador, y estas piedras de atributo no cumplen con la norma. CompatMode devuelve uno o dos valores, como sigue:
CSS1COMPAT: el documento cumple con una especificación HTML válida (no necesariamente html5/"> html5, la página HTML4 verificada también devuelve este valor);
BackCompat: el documento contiene características que no cumplen con las especificaciones, activando el modo de compatibilidad.
3. Use el objeto de ubicaciónDocument.location Devuelve un objeto de ubicación, proporcionándole la información de dirección del documento de grano fino y que le permite navegar a otros documentos.
Protocolo: Obtenga o establezca el protocolo para la URL del documento;
Host: obtenga o establezca la información del host de la URL del documento;
href: obtenga o establezca la información de dirección del documento;
Nombre de host: obtenga o establezca el nombre de host del documento;
Búsqueda: obtenga o establezca la información de la parte de consulta de URL del documento;
Hash: Obtenga o establezca la información sobre la parte del hash de URL del documento;
asignar (<uRL>): navegue a una URL especificada;
Reemplazar (<uRL>): elimine el documento actual y navegue a la URL especificada;
recargar (): recargar el documento actual;
ResolveUrl (<URL>): cambie la ruta relativa a una ruta absoluta.
Echemos un vistazo al siguiente ejemplo :<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> </title>
</ablo>
<Body>
<script type = "text/javaScript">
document.writeln ('<pre>');
document.writeLn ('Protocol:' + 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>
resultado:
4. Lea y escriba cookies A través del atributo de cookies, puede agregar, modificar y leer cookies en el documento. Como se muestra en el siguiente ejemplo:<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<meta name = "autor" content = "adam freeman" />
<meta name = "descripción" content = "un ejemplo simple" />
</ablo>
<Body>
<p id = "cookiedata">
</p>
<botón id = "escribir">
Agregar cookie </boton>
<botón id = "actualización">
Actualizar cookie </boton>
<botón id = "claro">
Clear Cookie </boton>
<script type = "text/javaScript">
var Cookiecount = 0;
document.getElementById ('actualización'). onClick = updateCookie;
document.getElementById ('Write'). OnClick = CreateCookie;
document.getElementById ('Clear'). OnClick = ClearCookie;
readCookies ();
función readCookies () {
document.getElementById ('Cookiedata'). Innerhtml =! Document.cookie? '': document.cookie;
}
función updateCookie () {
document.cookie = 'Cookie_' + Cookiecount + '= update_' + Cookiecount;
readCookies ();
}
función createCookie () {
Cookiecount ++;
document.cookie = 'Cookie_' + Cookiecount + '= Value_' + Cookiecount;
readCookies ();
}
function clearcookie () {
var exp = new Date ();
exp.setTime (exp.gettime () - 1);
var Arrstr = document.cookie.split (";");
para (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>
resultado:
5. Comprender ReadyStateDocument.readyState lo ayuda a comprender el estado actual de la página durante el proceso de carga y análisis de la página. Una cosa para recordar es que el navegador se ejecutará inmediatamente cuando se encuentre con un elemento de script, a menos que use el atributo diferido para retrasar la ejecución del script. ReadyState tiene tres valores que representan diferentes estados.
Carga: el navegador está cargando y ejecutando un documento;
Interactivo: el documento ha completado el análisis, pero el navegador está cargando otros recursos externos (medios, imágenes, etc.);
Completo: el análisis de la página se completa y los recursos externos se completan en el hogar.
Durante todo el proceso de carga y análisis del navegador, el valor de ReadyState cambiará uno por uno desde la carga, interacción y completa. Cuando se usa junto con el evento ReadyStateChange (activado cuando cambia el estado de ReadyState), ReadyState se vuelve bastante valioso.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<meta name = "autor" content = "adam freeman" />
<meta name = "descripción" content = "un ejemplo simple" />
<script>
document.OnreadyStateChange = function () {
if (document.readyState == "Interactive") {
document.getElementById ("PressMe"). onClick = function () {
document.getElementById ("resultados"). innerhtml = "botón presionado";
}
}
}
</script>
</ablo>
<Body>
<botón id = "pressme">
Presioname </Button>
<pre id = "resultados"> </pre>
</body>
</html>
El código anterior utiliza el evento ReadyStateChange para lograr el efecto de la ejecución retrasada. Solo cuando la página completa de la página esté analizada y contactada, el valor ReadyState se volverá interactivo. En este momento, el evento de clics estará vinculado al botón PressMe. Esta operación asegura que existan todos los elementos HTML requeridos y eviten que ocurran errores.
6. Obtenga información sobre la implementación de atributos DOMLa propiedad de implementación de documentos le ayuda a comprender la implementación del navegador de la propiedad DOM. Esta propiedad devuelve un objeto DomIMplementation, que contiene un método de HaSeFeature, a través del cual puede comprender la implementación del navegador de una determinada propiedad.
<! Doctype html>
<html>
<Evista>
<title> Ejemplo </title>
<meta name = "autor" content = "adam freeman" />
<meta name = "descripción" content = "un ejemplo simple" />
</ablo>
<Body>
<script>
Var características = ["Core", "Html", "CSS", "Selectores-API"];
Var niveles = ["1.0", "2.0", "3.0"];
document.writeLn ("<pre>");
para (var i = 0; i <caracteres.length; i ++) {
document.writeLn ("Comprobación de la función:" + características [i]);
para (var j = 0; j <nivels.length; j ++) {
document.write (características [i] + "nivel" + niveles [j] + ":");
document.writeln (document.implementation.hasfeature (características [i], niveles [j]));
}
}
document.write ("</pre>")
</script>
</body>
</html>
Efecto: