Daqui para frente, você vai me
ouvir dizer muito esta sigla: DOM.
DOM é a sigla para Modelo de
Objeto de Documento,
e é a forma com a qual os navegadores
deixa nós desenvolvedores
manipularmos páginas de
internet com JavaScript.
Sempre que um navegador
carrega uma página,
ele analisa todo o HTML e CSS,
e converte o documento
em um DOM.
Esse DOM é de fato um
objeto JavaScript grande,
que contém tudo o que quisermos
saber ou mudar em uma página,
como cada tag, atributo
e estilo para cada tag.
Para acessar o DOM em uma
página a partir do JavaScript,
usamos a variável global document,
e depois podemos usar propriedades
e chamar funções que estão
vinculadas a esse objeto aqui.
A estratégia geral para a manipulação
do DOM consiste em dois passos.
Deixe-me fazer uma
lista delas aqui.
Aí está, e depois temos
o segundo passo.
Vamos passar por cada um
desses dois passos agora.
O primeiro passo é encontrar o nó do
DOM usando um método de acesso.
Se estivermos procurando
pela tag < body >
então podemos acessá-la
bem facilmente
apenas usando document.body
E o segundo passo é a manipulação
do nó que selecionamos
mudando seus atributos, estilos,
HTML interno
ou anexando novos nós a ele, ...
Se quisermos apenas substituir
o conteúdo inteiro da tag,
então podemos usar a
propriedade innerHTML.
Neste caso: document.body.innerHTML =
"Webpage be gone!";
Consegui!
O navegador está observando as
alterações no objeto document,
e assim que ele vê você alterar o
HTML interno de document.body
ele reflete a mudança no
documento de fato.
Lembre-se, o objeto document não
é a página de verdade,
mas o navegador tenta fazê-lo refletir a
página atual tanto quanto possível.
Existem muitas maneiras
de realizar o passo um,
porque usualmente você quer encontrar
alguma coisa além da tag body.
Talvez você queira encontrar uma
tag com um certo ID
ou todas as tags de um certo tipo.
Isso é o que vamos falar no tutorial
de métodos de acesso do DOM.
Há também um monte de coisas legais
que você pode fazer no passo dois,
como mudar os atributos ou estilos
das tags que você selecionar.
Falaremos de tudo isso no tutorial
de modificação do DOM.
Tendo dominado o acesso e
manipulação do DOM
veremos formas divertidas de usá-los,
como quando responder a eventos
de usuários ou fazer animações.
Neste momento, é um pouco bobo
usar o JavaScript para fazer
o que poderíamos fazer apenas
usando o HTML de início,
mas acredite, você vai querer dominar
o acesso e modificação do DOM
para fazer experiências interativas
completas mais tarde.
Então, continue assistindo, e até mais.
Legendado por [Carlos A. N. C. R.]
Revisado por [Fernando dos Reis]