Como nos arquivos externos de HTML, a organização da marcação é separada de seu estilo, formato e comportamento. Embora você certamente possa alterar o estilo dos elementos ou do texto com JavaScript, é mais interessante realmente alterar a organização de como sua marcação é apresentada.
Apenas lembre-se de que sua marcação fornece apenas organização, uma estrutura, e você estará no caminho certo para o sucesso. Dê um pequeno passo adiante e você verá como o navegador pega toda aquela organização de texto e a transforma em algo superinteressante, um conjunto de objetos, cada um dos quais pode ser alterado, adicionado ou removido.
Vantagens da marcação de texto
Antes de discutir os navegadores da Web, vale a pena considerar por que o texto simples é a melhor opção para armazenar HTML (veja algumas outras ideias sobre marcação para obter mais informações). Independentemente dos prós e contras, basta lembrar que o HTML é enviado pela rede para o navegador da Web toda vez que uma página é visualizada (por questões de brevidade, caches, etc. não são levados em consideração). Realmente não há maneira mais eficiente de entregar texto. Objetos binários, representações gráficas de páginas, blocos de marcação reorganizados e assim por diante, todos eles mais difíceis de passar pela rede do que arquivos de texto simples.
Além disso, o navegador também aumenta a glória. Os navegadores atuais permitem aos usuários alterar o tamanho do texto, dimensionar imagens, baixar o CSS ou JavaScript da página (na maioria dos casos) e muito mais, o que impede completamente o envio de qualquer tipo de representação gráfica da página ao navegador. No entanto, o navegador precisa do HTML bruto para poder aplicar qualquer processamento à página no navegador, em vez de confiar no navegador para realizar essa tarefa. Da mesma forma, separar CSS de JavaScript e CSS de marcação HTML requer um formato que possa ser facilmente separado. Mais uma vez, os arquivos de texto são o melhor método para esta tarefa.
Por último, mas não menos importante, lembre-se que novos padrões (como HTML 4.01 e XHTML 1.0 e 1.1) prometem separar o conteúdo (os dados da página) da apresentação e do estilo (geralmente aplicado por CSS). Se os programadores separassem o HTML do CSS e depois forçassem o navegador a recuperar alguma representação da página que una as várias partes da página, eles perderiam a maior parte dos benefícios desses padrões. Manter essas partes separadas quando chegam ao navegador dá ao navegador uma flexibilidade sem precedentes na obtenção de HTML do servidor.
Considerações adicionais sobre
edição de texto simples de marcação: certo ou errado?
O texto simples é ideal para armazenar marcações, mas não é adequado para editá-las. Popular é o uso de IDEs, como o Macromedia DreamWeaver ou o mais poderoso Microsoft® FrontPage®, para manipular a marcação de páginas da Web. Esses ambientes geralmente fornecem atalhos e ajuda para a criação de páginas da Web, especialmente ao usar CSS e JavaScript, ambos provenientes de arquivos diferentes da marcação real da página. Não importa que muitas pessoas ainda prefiram o bom e velho Notepad ou vi (admito que sou um deles). De qualquer forma, o resultado final é um arquivo de texto cheio de marcações.
Texto na Web: O bom
já foi dito, o texto é o melhor meio para documentos, como HTML ou CSS, sendo transmitido milhares de vezes pela Web. Quando digo que é difícil para um navegador representar texto, estou me referindo especificamente à conversão de texto em uma página gráfica visual para o usuário visualizar. Isso não tem nada a ver com a forma como o navegador realmente recupera a página do navegador da Web. Nesse caso, o texto ainda é a melhor escolha.
Desvantagens da marcação de texto
Assim como a marcação de texto apresenta vantagens surpreendentes para designers e criadores de páginas, também apresenta desvantagens bastante surpreendentes para os navegadores. Especificamente, é difícil para os navegadores representarem diretamente a marcação de texto visualmente para o usuário (veja algumas outras idéias sobre marcação para obter detalhes). Considere as seguintes tarefas comuns do navegador:
·Aplicar estilos CSS (geralmente de múltiplas folhas de estilo em arquivos externos) à marcação com base no tipo de elemento, classe, ID e sua posição no documento HTML.
·Aplicar estilos e formatação a diferentes partes do documento HTML com base no código JavaScript (geralmente localizado em um arquivo externo).
·Altere os valores dos campos do formulário com base no código JavaScript.
·Baseado em código JavaScript, suporta efeitos visuais como inversão e troca de imagens.
A complexidade não reside na codificação dessas tarefas; tudo nelas é bastante fácil. A complexidade vem do navegador que realmente implementa a ação solicitada. Se a marcação for armazenada como texto, por exemplo, se você quiser inserir texto (alinhamento de texto: centro) no elemento p da classe de texto central, como fazer isso?
·Adicionar estilos embutidos ao texto?
·Aplicar estilos ao texto HTML no navegador e apenas manter o conteúdo centralizado ou não?
·Aplicar HTML sem estilo e depois aplicar a formatação?
Esses problemas muito difíceis são o motivo pelo qual tão poucas pessoas escrevem navegadores hoje. (Quem escreveu o navegador deve aceitar meus mais sinceros agradecimentos.)
Não há dúvida de que o texto simples não é uma boa maneira de armazenar o HTML do navegador, embora o texto seja a melhor solução para obter a marcação da página. Adicione a capacidade do JavaScript de alterar a estrutura da página e as coisas ficarão um pouco mais matizadas. O navegador deve reescrever a estrutura modificada no disco? Como você pode manter a versão mais recente do documento?
Certamente, o texto não é a resposta. É difícil de modificar, é difícil aplicar estilos e comportamentos a ele e está fundamentalmente distante da natureza dinâmica das páginas da Web atuais.
A resposta para o problema derecorrer a visualizações em árvore
(pelo menos a resposta escolhida pelos navegadores da Web atuais) é usar uma estrutura em árvore para representar HTML. Veja a Listagem 1, uma página HTML bastante simples e enfadonha que representa a marcação deste artigo.
Listagem 1. Página HTML simples<html>
em marcação de texto
<cabeça>
<title>Árvores, árvores, em todos os lugares</title>
</head>
<corpo>
<h1>Árvores, árvores, em todos os lugares</h1>
<p>Bem-vindo a uma página <em>muito</em> chata.</p>
<div>
Volte em breve.
<img src="come-again.gif" />
</div>
</body>
</html>
O navegador aceita a página e a converte em uma estrutura em árvore, conforme mostrado na Figura 1.
Para manter este artigo em movimento, simplifiquei-o um pouco. Especialistas em DOM ou XML estarão cientes do impacto que os espaços em branco têm na forma como o texto de um documento é representado e dividido na estrutura em árvore de um navegador da Web. Uma compreensão superficial apenas torna as coisas ambíguas; portanto, se você quiser descobrir o impacto do espaço em branco, essa é sua melhor aposta; caso contrário, continue lendo e não pense nisso; Quando isso se tornar um problema, você saberá tudo o que precisa.
Além do plano de fundo da árvore real, a primeira coisa que você pode notar é que tudo na árvore começa com o elemento HTML mais externo, o elemento html. Usando a metáfora de uma árvore, isso é chamado de elemento raiz. Portanto, embora este seja o nível mais baixo da árvore, quando você olha e analisa a árvore, geralmente começo com isto. Se funcionar, você poderia virar a árvore inteira de cabeça para baixo, mas isso amplia um pouco a metáfora da árvore.
As linhas que fluem da raiz representam a relação entre as diferentes partes rotuladas. Os elementos head e body são filhos do elemento raiz html, title é filho de head, e o texto "Árvores, árvores, em todos os lugares" é filho de title; Toda a árvore é organizada desta forma até que o navegador obtenha uma estrutura semelhante à Figura 1.
Alguma terminologia adicional
Para manter a metáfora da árvore, a cabeça e o corpo são chamados de ramos do html. Eles são chamados de ramos porque têm seus próprios filhos. Quando você chegar ao final da árvore, você chegará ao texto principal, como "Árvores, árvores, em todos os lugares" e "realmente" muitas vezes são chamadas de folhas porque não têm filhos próprios. Você não precisa se lembrar de todos esses termos; é muito mais fácil apenas imaginar a estrutura da árvore quando você está tentando descobrir o que um determinado termo significa.
Valores do objeto
Agora que você entende um pouco da terminologia básica, é hora de focar no pequeno retângulo que contém o nome do elemento e o texto (Figura 1). Cada retângulo é um objeto; o navegador resolve alguns problemas de texto dentro dele. Ao usar objetos para representar cada parte de um documento HTML, você pode alterar facilmente a organização, aplicar estilos, permitir que JavaScript acesse o documento e muito mais.
Tipos de objetos e
marcadores de propriedades Cada tipo possível possui seu próprio tipo de objeto. Por exemplo, os elementos em HTML são representados pelo tipo de objeto Element. O texto no documento é representado pelo tipo Texto, os atributos são representados pelo tipo Atributo e assim por diante.
Portanto, os navegadores da Web não apenas podem usar um modelo de objeto para representar documentos (evitando assim ter que lidar com texto estático), mas também podem usar tipos de objeto para dizer imediatamente o que é algo. O documento HTML é analisado e convertido em uma coleção de objetos, conforme mostrado na Figura 1, e itens como colchetes angulares e sequências de escape (por exemplo, use < para < e > para >) não são mais um problema. Isso torna o trabalho do navegador (pelo menos depois de analisar o HTML de entrada) muito mais fácil. É fácil descobrir se algo é um elemento ou um atributo e determinar como lidar com objetos desse tipo.
Ao usar objetos, um navegador da Web pode alterar as propriedades desses objetos. Por exemplo, cada objeto elemento possui um elemento pai e uma lista de elementos filhos. Portanto, adicionar um novo elemento filho ou texto simplesmente adiciona um novo elemento filho à lista de elementos filhos do elemento. Esses objetos também possuem uma propriedade de estilo, portanto, alterar rapidamente o estilo de um elemento ou segmento de texto é muito simples. Por exemplo, para usar JavaScript para alterar a altura de uma div, fique assim:
someDiv.style.height = "300px"
Em outras palavras, um navegador da web torna muito fácil alterar a aparência e a estrutura de uma árvore usando object
;propriedades. Compare isso com as coisas complicadas que um navegador precisa fazer internamente para representar uma página como texto. Cada alteração em uma propriedade ou estrutura exige que o navegador reescreva o arquivo estático, analise-o novamente e exiba-o novamente na tela. Com objetos tudo isso se resolve.
Agora, reserve um momento para expandir alguns documentos HTML e delineá-los em uma árvore. Embora isso possa parecer uma solicitação incomum (especialmente em um artigo como este que contém tão pouco código), se você espera poder manipular essas árvores, você precisa estar familiarizado com sua estrutura.
Ao longo do caminho, você poderá descobrir algumas coisas estranhas. Por exemplo, considere o seguinte:
O que acontece com o atributo?
·E quanto ao texto dividido em elementos (como em e b)?
·E quanto ao HTML que não está estruturado adequadamente (por exemplo, quando falta a tag de fechamento p)?
Depois de estar familiarizado com esses problemas, você poderá entender melhor as seções a seguir.
A rigidez às vezes é uma coisa boa
Se você tentar o exercício que acabei de mencionar, poderá encontrar alguns problemas potenciais com a visualização em árvore marcada (se não, acredite apenas na minha palavra!). Na verdade, alguns problemas serão encontrados na Listagem 1 e na Figura 1. Primeiro, observe como o elemento p é decomposto. Se você perguntar ao desenvolvedor Web médio "Qual é o conteúdo do texto do elemento p?", a resposta mais comum será "Bem-vindo a uma página Web realmente chata". Se você comparar isso com a Figura 1, verá que essa resposta (embora lógica) simplesmente não está correta.
Na verdade, o elemento p tem três objetos filhos diferentes, nenhum dos quais contém o texto completo "Bem-vindo a uma página da Web realmente chata". Você encontrará partes do texto como “Bem-vindo a uma” e “página da Web chata”, mas não tudo. Para entender isso, lembre-se de que qualquer coisa na marcação deve ser convertida em algum tipo de objeto.
Além disso, a ordem não importa! Você pode imaginar como um usuário responderia a um navegador da Web se o navegador exibisse os objetos corretos, mas em uma ordem diferente daquela fornecida no HTML? E se o parágrafo estiver imprensado entre o título da página e o título do artigo e não for assim que você organiza seu documento? Obviamente, o navegador deve manter a ordem dos elementos e do texto.
Neste exemplo, o elemento p tem três partes diferentes:
· O texto antes do elemento em · O próprio elemento em · O texto após o elemento em
Se você bagunçar essa ordem, poderá focar na parte errada do texto. Para manter tudo em ordem, o elemento p possui três objetos filhos, na ordem mostrada no HTML da Listagem 1. Além disso, o texto-chave “realmente” não é um elemento filho de p; é um elemento filho de em, um elemento filho de p;
É muito importante entender esse conceito. Embora o texto "realmente" provavelmente apareça com outro texto do elemento p, ele ainda é um filho direto do elemento em. Ele pode ter um formato diferente de outro texto p e pode ser movido independentemente de outro texto.
Para manter isso em mente, tente diagramar o HTML nas Listagens 2 e 3 para garantir que o texto tenha o elemento pai correto (independentemente de como o texto acabará aparecendo na tela).
Listagem 2. Marcação
<html>
com aninhamento inteligente de elementos
<cabeça>
<title>Isso é um pouco complicado</title>
</head>
<corpo>
<h1>Preste <u>muita</u> atenção, ok?</h1>
<div>
<p>Este p realmente não é <em>necessário</em>, mas torna o
<span id="bold-text">estrutura <i>e</i> a organização</span>
da página é mais fácil de acompanhar.</p>
</div>
</body>
</html>
Listagem 3. Aninhamento de elementos mais inteligente
<html>
<cabeça>
<title>Aninhamento ainda mais complicado</title>
</head>
<corpo>
<div id="corpo principal">
<div id="conteúdo">
<tabela>
<tr><th>Etapas</th><th>Processo</th></tr>
<tr><td>1</td><td>Descubra o <em>elemento raiz</em>.</td></tr>
<tr><td>2</td><td>Lide primeiro com a <span id="code">cabeça</span>,
pois geralmente é fácil.</td></tr>
<tr><td>3</td><td>Trabalhe no <span id="code">corpo</span>.
Apenas <em>não tenha pressa</em>.</td></tr>
</tabela>
</div>
<div id="fechamento">
Este link <em>não</em> está ativo, mas se estivesse, as respostas
para isso <a href="answers.html"><img src="exercise.gif" /></a> seria
esteja lá. Mas <em>faça o exercício mesmo assim!</em>
</div>
</div>
</body>
</html>
Você encontrará as respostas para esses exercícios nos arquivos GIF no final deste artigo, tricky-solution.gif na Figura 2 e trickier-solution.gif na Figura 3. Não espie, reserve um tempo para responder automaticamente primeiro. Isso o ajudará a entender o quão rígidas as regras se aplicam ao organizar a árvore e realmente o ajudará a dominar o HTML e sua estrutura em árvore.
E quanto aos atributos?
Você está enfrentando alguns problemas ao tentar descobrir o que fazer com as propriedades? Como mencionado antes, o atributo tem seu próprio tipo de objeto, mas o atributo não é de fato filho do elemento que o exibe. O elemento aninhado e o texto não estão no mesmo "nível" do atributo, como você notará, o. respostas aos exercícios nas Listagens 2 e 3 Nenhuma propriedade é mostrada.
Na verdade, as propriedades são armazenadas no modelo de objeto usado pelos navegadores, mas possuem alguns casos especiais. Cada elemento possui uma lista de propriedades disponíveis, separada da lista de objetos filhos. Portanto, um elemento div pode ter uma lista contendo um atributo “id” e outro atributo “class”.
Lembre-se que os atributos dos elementos devem ter nomes únicos, ou seja, um elemento não pode ter dois atributos “id” ou dois atributos “class”. Isso torna a lista fácil de manter e acessar. Como você verá no próximo artigo, você pode simplesmente chamar um método como getAttribute("id") para obter o valor de um atributo por nome. Chamadas de métodos semelhantes também podem ser usadas para adicionar propriedades ou definir (redefinir) o valor de propriedades existentes.
Vale ressaltar que a singularidade dos nomes dos atributos torna esta lista diferente da lista de subobjetos. Um elemento p pode ter vários elementos em, portanto a lista de objetos filho pode conter várias duplicatas. Embora as listas de filhos e as listas de propriedades operem de forma semelhante, uma pode conter duplicatas (filhos de um objeto), mas não pode (propriedades de um objeto elemento). Finalmente, apenas os elementos possuem atributos, portanto os objetos de texto não possuem uma lista adicional para armazenar atributos.
HTML bagunçado
Antes de falarmos sobre como os navegadores convertem a marcação em uma representação em árvore, há outro tópico que vale a pena explorar, ou seja, como os navegadores lidam com marcações que não estão bem formadas. Bem formado é um termo amplamente utilizado em XML e possui dois significados básicos:
·Cada tag de abertura possui uma tag de fechamento correspondente. Portanto, todo <p> no documento corresponde a </p>, todo <div> corresponde a </div> e assim por diante.
A tag inicial mais interna corresponde à tag final mais interna, a próxima tag inicial mais interna corresponde à próxima tag final mais interna e assim por diante. Portanto, <b><i>negrito e itálico</b></i> é ilegal porque a tag de abertura mais interna <i> não corresponde corretamente à tag de fechamento mais interna <b>. Para torná-lo bem formado, altere a ordem das tags de abertura ou a ordem das tags de fechamento. (Se você trocar ambos, o problema ainda ocorrerá).
Dê uma olhada nessas duas regras. Estas duas regras não só simplificam a organização dos documentos, mas também eliminam a incerteza. O negrito deve ser aplicado primeiro e depois o itálico? Ou apenas o oposto? Se esta ordem e incerteza não parecerem grande coisa, tenha em mente que CSS permite que regras substituam outras regras, então, por exemplo, se o texto no elemento b tiver uma fonte diferente da fonte no elemento i, a ordem em que a formatação é aplicada mudará. É muito importante. Portanto, a boa formação do HTML desempenha um papel crucial.
Se o navegador receber um documento que não esteja bem formado, ele fará o possível. A estrutura em árvore resultante será, na melhor das hipóteses, uma aproximação da página original pretendida pelo autor e, na pior das hipóteses, será irreconhecível. Se você já carregou uma página em seu navegador e viu resultados completamente inesperados, provavelmente olhou os resultados do navegador e adivinhou como deveria ser sua estrutura, e continuou trabalhando frustrado. Claro que resolver esse problema é bem simples: certifique-se de que o documento esteja bem formatado! Se você não tiver certeza de como escrever HTML padronizado, consulte seus recursos para obter ajuda.
Introdução ao DOM
Até agora, você já sabe que os navegadores convertem páginas da Web em representações de objetos e pode até ter adivinhado que as representações de objetos são árvores DOM. DOM significa Document Object Model e é uma especificação disponível no World Wide Web Consortium (W3C) (você pode ver alguns links relacionados ao DOM em Recursos).
Mas o mais importante é que o DOM define os tipos e propriedades dos objetos, permitindo que o navegador represente a marcação. (O próximo artigo desta série será dedicado às especificações para usar o DOM em código JavaScript e Ajax.)
Objeto de Documento
Primeiro, você precisa acessar o próprio modelo de objeto. É muito fácil usar a variável document interna em qualquer código JavaScript executado em uma página da Web. Você pode escrever um código como este:
var domTree = document
É claro que esse código em si é inútil, mas demonstra que toda Web; o navegador cria documentos Os objetos podem ser usados no código JavaScript, e uma árvore completa de marcação de representação de objetos é demonstrada (Figura 1).
Cada item é um nó
Obviamente, o objeto document é importante, mas isso é apenas o começo. Antes de prosseguir, há outro termo para aprender: nós. Você já sabe que cada parte da marcação é representada por um objeto, mas não é qualquer objeto, é um tipo específico de objeto, um nó DOM. Tipos mais específicos, como texto, elementos e atributos, todos herdam desse tipo de nó básico. Portanto, pode haver nós de texto, nós de elementos e nós de atributos.
Se você já tem muita experiência em programação JavaScript, provavelmente já trabalha com código DOM. Se você tem acompanhado esta série Ajax até agora, já deve estar trabalhando com código DOM há algum tempo. Por exemplo, a linha de código var number = document.getElementById("phone").value; usa o DOM para localizar um elemento específico e, em seguida, recupera o valor desse elemento (neste caso, um campo de formulário). Portanto, mesmo que você não perceba, você estará usando o DOM toda vez que digitar um documento em código JavaScript.
Para elaborar os termos que você já aprendeu, uma árvore DOM é uma árvore de objetos, mas mais especificamente, é uma árvore de objetos de nós. Em aplicativos Ajax ou qualquer outro JavaScript, você pode usar esses nós para produzir efeitos como remover elementos e seus conteúdos, destacar texto específico ou adicionar novos elementos de imagem. Como todos ocorrem no lado do cliente (o código executado no navegador da Web), esses efeitos ocorrem imediatamente, sem comunicação com o servidor. O resultado final geralmente é que o aplicativo parece mais responsivo porque o conteúdo da página da Web muda sem longas pausas enquanto a solicitação é direcionada ao servidor e a resposta é interpretada.
Na maioria das linguagens de programação, você precisa aprender o nome real do objeto de cada tipo de nó, aprender as propriedades disponíveis e descobrir tipos e conversões, mas em JavaScript isso não é necessário. Você pode simplesmente criar uma variável e atribuir a ela o objeto desejado (como você já viu):
var domTree = document;
var phoneNumberElement = document.getElementById("telefone");
var phoneNumber = phoneNumberElement.value
Não há tipo, o JavaScript cria a variável conforme necessário e atribui a ela o tipo correto. Como resultado, trabalhar com o DOM a partir do JavaScript torna-se trivial (um artigo futuro será dedicado ao DOM em relação ao XML, que será ainda mais engenhoso).
Paraencerrar
, quero deixar vocês com um pouco de suspense aqui. Obviamente, esta não é uma descrição completamente exaustiva do DOM; na verdade, este artigo é apenas uma introdução ao DOM; Há muito mais no DOM do que apresentei hoje!
O próximo artigo desta série expandirá essas ideias e se aprofundará em como usar o DOM em JavaScript para atualizar páginas da Web, alterar HTML rapidamente e criar uma experiência mais interativa para seus usuários. Voltarei ao DOM novamente em um artigo posterior dedicado ao uso de XML em solicitações Ajax. Portanto, esteja familiarizado com o DOM, que é uma parte importante dos aplicativos Ajax.
Neste ponto, entender o DOM em profundidade seria bastante simples, como detalhar como se mover pela árvore do DOM, obter os valores dos elementos e do texto, iterar pelas listas de nós, etc., mas isso pode deixar você com o impressão de que o DOM tem tudo a ver com código, o que não é o caso.
Antes de ler o próximo artigo, tente pensar em uma estrutura de árvore e experimente-a com algum HTML de sua preferência para ver como um navegador da Web converte HTML em uma visualização em árvore de marcação. Além disso, pense na organização da árvore DOM e pratique-a com os casos especiais apresentados neste artigo: atributos, texto com elementos misturados e elementos sem conteúdo de texto (como o elemento img).
Ter uma compreensão sólida desses conceitos e depois aprender a sintaxe do JavaScript e do DOM (próximo artigo) tornará a resposta muito mais fácil.
E não se esqueça, há respostas para as Listagens 2 e 3, completas com código de exemplo!