O conteúdo de hoje é sobre como manipular objetos de documentos.
1. Opere metadados de documentos Primeiro, vamos dar uma olhada nos atributos relacionados:CaracterSet: Obtenha o método de codificação do documento atual, e esta propriedade é somente leitura;
Charset: obtenha ou defina o método de codificação do documento atual;
CompatMode: obtenha o modo de compatibilidade do documento atual;
Cookie: obtenha ou defina o objeto de cookie do documento atual;
defaultcharset: obtenha o método de codificação padrão do navegador;
DefaultView: Obtenha o objeto da janela do documento atual;
Dir: obtenha ou defina o alinhamento do texto do documento atual;
Domínio: obtenha ou defina o valor Domian do documento atual;
Implementação: Forneça informações sobre os recursos DOM suportados;
LastModified: Obtenha o último horário de modificação do documento (se não houver tempo de modificação, ele retorna a hora atual);
Localização: forneça informações de URL do documento atual;
ReadyState: retorna o status do documento atual, que é uma propriedade somente leitura;
REFERN: Retorna as informações do URL do documento conectadas ao documento atual;
Título: Obtenha ou defina o título do documento atual.
Vamos dar uma olhada no exemplo a seguir:
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<script type = "text/javascript">
document.writeln ('<pre>');
document.writeln ('caracteres:' + 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 ('referenciador:' + document.Referrer);
document.writeln ('título:' + document.title);
document.write ('</pre>');
</script>
</body>
</html>
Resultados (os resultados exibidos por diferentes navegadores podem ser diferentes):
2. Como entender o modo de compatibilidadeA propriedade CompatMode informa como o navegador lida com o documento atual. Existem muitos HTML não padrão agora que o navegador tentará exibir essas páginas, mesmo que não cumpram a especificação HTML. Algum conteúdo depende de recursos exclusivos que existiam nas guerras anteriores do navegador, e essas pedras de atributo não cumprem a norma. O CompatMode retorna um ou dois valores, como segue:
CSS1Compat: o documento está em conformidade com uma especificação HTML válida (não necessariamente HTML5/"> html5, a página HTML4 verificada também retorna esse valor);
BackCompat: O documento contém recursos que não cumprem as especificações, acionando o modo de compatibilidade.
3. Use o objeto de localizaçãoDocument.Location Retorna um objeto de localização, fornecendo as informações de endereço do documento de granulação fina e permitindo que você navegue para outros documentos.
Protocolo: obtenha ou defina o protocolo para o URL do documento;
Host: obtenha ou defina as informações do host do URL do documento;
href: obtenha ou defina as informações de endereço do documento;
HostName: obtenha ou defina o nome do host do documento;
Pesquisa: Obtenha ou defina as informações da parte da consulta do URL do documento;
Hash: obtenha ou defina as informações sobre a parte do hash de URL do documento;
atribuir (<url>): navegue para um URL especificado;
Substitua (<url>): Remova o documento atual e navegue até o URL especificado;
recarregar (): Recarregue o documento atual;
Resolveurl (<url>): altere o caminho relativo para um caminho absoluto.
Vamos dar uma olhada no exemplo a seguir :<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> </title>
</head>
<Body>
<script type = "text/javascript">
document.writeln ('<pre>');
document.writeln ('protocolo:' + document.location.protocol);
document.writeln ('host:' + document.location.host);
document.writeln ('hostName:' + document.location.hostname);
document.writeln ('porta:' + document.location.port);
document.writeln ('pathname:' + document.location.pathname);
document.writeln ('pesquisa:' + document.location.search);
document.writeln ('hash:' + document.location.hash);
document.writeln ('</pre>');
</script>
</body>
</html>
resultado:
4. Leia e escreva cookies Através do atributo Cookie, você pode adicionar, modificar e ler cookies no documento. Conforme mostrado no exemplo a seguir:<! Doctype html>
<html>
<head>
<title> Exemplo </title>
<meta name = "autor" content = "Adam Freeman" />
<meta name = "description" content = "um exemplo simples" />
</head>
<Body>
<P ID = "Cookiedata">
</p>
<botão id = "write">
Adicione cookie </butter>
<botão id = "update">
Atualize o cookie </botão>
<button id = "clear">
Clear Cookie </botão>
<script type = "text/javascript">
var cookiecount = 0;
document.getElementById ('update'). OnClick = updateCookie;
document.getElementById ('write'). OnClick = createEcookie;
document.getElementById ('Clear'). OnClick = Clearcookie;
readcookies ();
função readcookies () {
Document.getElementById ('Cookiedata'). Innerhtml =! Document.cookie? '': document.cookie;
}
função updateCookie () {
document.cookie = 'cookie_' + cookiecount + '= update_' + cookiecount;
readcookies ();
}
função createEcookie () {
Cookiecount ++;
document.cookie = 'cookie_' + cookiecount + '= value_' + cookiecount;
readcookies ();
}
função 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 = arrtr [i] .split ("=");
if (temp [0]) {
document.cookie = temp [0] + "=; expires =" + exp.togmtString ();
};
}
Cookiecount = 0;
readcookies ();
}
</script>
</body>
</html>
resultado:
5. Entenda ReadyStateDocument.ReadyState ajuda você a entender o estado atual da página durante o processo de carregamento e análise da página. Uma coisa a lembrar é que o navegador será executado imediatamente ao encontrar um elemento de script, a menos que você use o atributo de adiamento para atrasar a execução do script. O ReadyState tem três valores representando diferentes estados.
Carregando: o navegador está carregando e executando um documento;
Interactive: o documente concluiu a análise, mas o navegador está carregando outros recursos externos (mídia, fotos etc.);
Concluído: A análise da página é concluída e os recursos externos são concluídos em casa.
Durante todo o processo de carregamento e análise do navegador, o valor do ReadyState mudará um por um de carregamento, interação e completo. Quando usado em conjunto com o evento ReadyStateChange (acionado quando o estado do Estado ReadyState mudar), o ReadyState se torna bastante valioso.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
<meta name = "autor" content = "Adam Freeman" />
<meta name = "description" content = "um exemplo simples" />
<Cript>
document.onreadystatechange = function () {
if (document.readystate == "interactive") {
document.getElementById ("PressMe"). OnClick = function () {
Document.getElementById ("Resultados"). Innerhtml = "Botão pressionado";
}
}
}
</script>
</head>
<Body>
<botão id = "Pressme">
Pressione -me </botão>
<pre iD = "Resultados"> </pre>
</body>
</html>
O código acima usa o evento ReadyStateChange para alcançar o efeito da execução tardia. Somente quando a página inteira na página for analisada e contatada, o valor do Estado Ready se tornará interativo. Neste momento, o evento de clique estará vinculado ao botão PressME. Esta operação garante que todos os elementos HTML necessários existam e impede que os erros aconteçam.
6. Obtenha informações sobre a implementação do atributo DOMA propriedade Document.Implementation ajuda a entender a implementação do navegador da propriedade DOM. Essa propriedade retorna um objeto de domimimplementação, que contém um método Has -Heature, através do qual você pode entender a implementação do navegador de uma determinada propriedade.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
<meta name = "autor" content = "Adam Freeman" />
<meta name = "description" content = "um exemplo simples" />
</head>
<Body>
<Cript>
VAR Recursos = ["Core", "HTML", "CSS", "Selectors-api"];
Var níveis = ["1.0", "2.0", "3.0"];
document.writeln ("<pre>");
for (var i = 0; i <recursos.length; i ++) {
document.writeln ("Verificando o recurso:" + recursos [i]);
for (var j = 0; j <nível.Length; j ++) {
document.write (recursos [i] + "nível" + níveis [j] + ":");
document.writeln (document.implementation.hasfeature (recursos [i], níveis [j]));
}
}
document.write ("</pre>")
</script>
</body>
</html>
Efeito: