Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor.
Curso JavaScript - Fundamentos
Conhecer o cursoO que é DOM?
Document Object Model (DOM) é uma API que podemos acessar com JavaScript para alterar elementos HTML/XML. Para ficar mais claro, podemos representar o DOM pela seguinte árvore:
Vale ressaltar que o DOM não é exatamente o código que vimos no DevTools. Um exemplo são os pseudo-elementos criados pelo CSS que não podemos acessar usando JavaScript pelo DOM.
Leia nosso artigo “O que é DOM, Virtual DOM e Shadow DOM?”, para se aprofundar sobre DOM e suas variações.
Selecionando elementos do dom
Conforme descrito na representação acima, a árvore com a estrutura de elementos HTML pode ser uma representação do DOM, mas como podemos visualizar de forma prática?
Utilizando o DevTools de seu navegador, temos a seguinte representação:
O exemplo acima conta com o seguinte código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Estrutura DOM</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="titulo">Aqui temos um H1</h1>
<h2>Uma Tag H2</h2>
<p>Um texto qualquer.</p>
</body>
</html>
Este é o resultado no navegador:
Agora, como podemos selecionar algum elemento com JavasScript no navegador?
Nós temos alguns métodos que podemos utilizar para encontrar e acessar os dados dos elementos do DOM. Alguns deles são: document.getElementsByTagName(tagName), document.gelElementsByClassName(className) e document.getElementById(id).
Curso Acessibilidade - Desenvolvendo sites acessíveis
Conhecer o cursoAlém destes, há outros métodos que podem ser usados para acessar e manipular elementos do DOM, você pode ver todos na MDN Web Docs.
Para dar sequência ao exemplo acima, vamos utilizar o método document.getElemetById(id) para obter o conteúdo de nossa Tag H1 e exibi-la, para isso vamos criar o código abaixo, desta forma:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Estrutura DOM</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="titulo">Aqui temos um H1</h1>
<h2>Uma Tag H2</h2>
<p>Um texto qualquer.</p>
<script>
var elemento = document.getElementById('titulo');
document.write('<h1 style="color: #025fff">' + elemento.innerText + ' agora em azul </h1>');
</script>
</body>
</html>
Para fins didáticos, usamos o código JavaScript no mesmo arquivo de nosso HTML, contudo, vale ressaltar que é uma boa prática separar os arquivos. Podemos carregar um arquivo JavaScript adicionando a linha abaixo em nosso html logo antes da tag de fechamento do nosso body, conforme o exemplo acima:
<script type="text/javascript" src="arquivo.js">
Observe que no atributo ‘src’ colocamos o diretório do arquivo js a ser importado, no exemplo o arquivo js foi criado no mesmo diretório da página html. Caso você utilize uma estrutura de arquivos, o atributo seria, por exemplo: src=“./assets/js/arquivo.js“.
Neste momento nós criamos a variável elemento e passamos para ela o elemento H1 com id título. Logo após exibimos na página utilizando o atributo innerText, que seleciona apenas o texto do elemento, assim, criamos um novo elemento com o mesmo conteúdo mas com a propriedade cor diferente.
Com o código acima vamos obter o seguinte resultado:
Desta forma podemos acessar o conteúdo de texto de algum elemento e criar um novo com outras características.
Manipulação básica do dom
Além de acessar, nós podemos manipular elementos do DOM com JavaScript.
Para demonstrar, vamos criar um botão que altere a cor e o alinhamento de algum elemento de nossa escolha, como o nosso elemento de id título.
Neste caso podemos complementar o nosso código da seguinte maneira:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Estrutura DOM</title>
<meta charset="utf-8">
</head>
<body>
<h1 id="titulo">Aqui temos um H1</h1>
<h2>Uma Tag H2</h2>
<p>Um texto qualquer.</p>
<input id="botao" type="button" value="Mudar de cor e alinhamento" onclick="mudarCor()"/>
<script>
var elemento = document.getElementById('titulo');
document.write('<h1 style="color: #025fff">' + elemento.innerText + ' agora em azul </h1>');
function mudarCor(){
var texto = document.getElementById('titulo');
texto.style.color = 'red';
texto.style.textAlign = 'right';
}
</script>
</body>
</html>
Criamos a função mudarCor(), declaramos uma constante ‘texto’ e passamos o elemento com id titulo. Ao ser chamada a função, deve ser alterado a cor e o alinhamento do elemento conforme as propriedades do nosso código, no caso style.color e style.textAlign.
Ao clicar no botão que foi criado, nosso elemento de id título, que é uma tag H1, irá alterar a sua cor para vermelho e terá alinhamento a direita, conforme abaixo:
Com a propriedade style é possível manipular os estilos dos elementos, seguindo o padrão do exemplo, como: style.fontSize, style.display, etc.
Vale ressaltar que a propriedade style utiliza o padrão camel case.
Eventos
O navegador dispara vários eventos quando um usuário está interagindo com uma página. Esses eventos são ações deste usuário, como:
- click: quando é pressionado e liberado o botão principal do mouse.
- dbclick: quando acontece um clique duplo no mouse.
- mousemove: qualquer movimento do mouse.
- mouseover: movimento sobre algum elemento.
- keydown: quando uma tecla do teclado é pressionada.
- scroll: quando há rolagem em algum elemento.
Aconselho consultar a página de eventos da MDN Web Docs, onde você poderá visualizar vários eventos possíveis além desses listados.
Podemos analisar no exemplo acima que o código do botão possui a seguinte propriedade: onclick="mudarCor() , ou seja, utilizamos o evento click para chamar a função mudarCor() e com isso manipular o elemento H1 de id título.
Desta forma podemos utilizar inúmeros eventos para deixar nossas páginas mais dinâmicas e interativas conforme as ações do usuário
Conclusão
Neste artigo entendemos como podemos trabalhar com JavaScript no navegador através do DOM, vimos sobre sua hierarquia e estrutura, como manipular e alterar elementos.
É importante dominar esses conceitos, pois eles possibilitam a criação de páginas e sistemas WEB inteligentes e dinâmicos, abrindo várias vertentes na hora de desenvolver os seus projetos!
Formação Desenvolvedor JavaScript
Conhecer a formaçãoPor fim, caso queira aprender mais sobre JavaScript saiba que aqui na TreinaWeb temos o curso JavaScript Intermediário que possui 03h38 de vídeos e um total de 38 exercícios. Conheça também nossos outros cursos de JavaScript.
Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:
- Orientação a Objetos;
- Protótipos e Classes;
- Tratamento de Erros e Debugging;
- Trabalhando com Expressões Regulares;
- Recursividade, escopo e closure;
- Location, History e Window;
- Trabalhando com Formulários;
- Abrindo e Salvando arquivos;
- Requisições HTTP;
- Conhecendo o jQuery.
