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]