DOM no JavaScript: como manipular elementos do HTML | Alura Cursos Online
DOM no JavaScript: como manipular elementos do HTML
11 min11 minutos de leitura
11 min11 minutos de leitura
Autor(a)
Ellen Pimentel
Ellen iniciou sua carreira em programação como Desenvolvedora Front-End e atualmente integra a equipe de Instrutores de Java na Alura Latam. Além da área de desenvolvimento, gosta de estudar sobre processos e negócios, tem Especialização em Gestão de Projetos e experiência em educação através de projetos educacionais em ciência e ensino de idioma.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
A tradução do acrônimo inglês (Document Object Model) significa Modelo de Documento do Objeto; trata-se da modelagem de todo o HTML.
A partir da sua quinta versão, o HTML até então estático, além das melhorias na estrutura e separação da semântica da estilização, ganhou interatividade com a criação da linguagem de programação JavaScript, e é nesse momento que surge o DOM.
Uma das melhores formas para entender um conceito, e é algo recorrente no universo da tecnologia, é fazer abstrações e analogias.
Estrutura
O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que antecede o document é o window, que nada mais é que a janela do navegador. Em sua estrutura, o document está no topo como objeto global e tem como elemento raiz a taghtml e todas as outras descendem dela através das suas ramificações (branchs).
A taghtml, objeto pai, apresenta dois objetos filhos: o head e o body (o cabeçalho e o corpo). Os objetos que seguem nas ramificações de baixo são denominados como child, e os de cima, parent. A taghead é parent da tagtitle, e a body é parent das tagsa e h1, e assim sucessivamente, de acordo com a hierarquia. Das tags, derivam os atributos, e destes, seus valores.
E a pergunta que surge é: mas o DOM faz parte do HTML ou do JavaScript? Na verdade, de nenhum, ele é gerado pelo browser. Ao carregar a página, o navegador cria o documento, a interface, e o Javascript usa o DOM para se conectar ao HTML.
Para realizar a comunicação entre eles é necessário inserir a tagscript no arquivo HTML, e como boa prática, ela deve estar antes do fechamento da tagbody para que os scripts sejam carregados após o código base.
É possível realizar de duas formas: escrevendo o código em JavaScript dentro da própria tagscript, ou inserindo o caminho relativo do arquivo externo. Também como boa prática, a segunda opção é a mais recomendada para a separação de responsabilidades e melhor manutenção do código.
<script>alert("Olá, Mundo!")
</script>
<scriptsrc="script.js"></script>
Maneiras de manipulá-lo
No DevTools do navegador, na aba Console, ao digitar console.dir (diretório) e passar o parâmetro document, é exibida uma lista com propriedades e funcionalidades do documento.
São várias as formas de navegação dentro do DOM, no JavaScript utilizamos o objeto document e através do ponto acessamos as propriedades e métodos, possibilitando selecionar, alterar, deletar, e criar elementos aos componentes do website, de acordo com a padronização criada pela W3Schools.
Para realizar essas ações temos alguns métodos, tais como:
document.getElementById();
document.getElementsByClass();
document.getElementsByTagName();
document.querySelector();
document.querySelectorAll();
document.createElement();
element.addEventListener();
Com o document.querySelector, por exemplo, dentre as opções que ele oferece, podemos alterar o texto no documento HTML:
Lembra que a janela do navegador é representada pelo objeto window? Utilizando outros exemplos, quando escrevemos a função alert ou o método write, é como se escrevêssemos dessa forma:
O DOM é um conjunto de objetos e sua estrutura de dados é representada através de um diagrama, ou de forma figurativa, uma árvore de objetos.
Quando se fala do desenvolvimento web básico, temos a tríade inseparável: HTML, CSS e JavaScript, cada um com o seu papel. Conhecer a base da programação e o que eles representam é essencial para poder avançar com frameworks e bibliotecas como Angular, Vue.js e React.
A tecnologia é uma área dinâmica, e assim como em diversos aspectos da nossa vida, não é necessário ter um dom para realizar algo, mas sim, estudo contínuo e muita prática.
A tradução do acrônimo inglês DOM (Document Object Model) significa Modelo de Documento do Objeto; trata-se da modelagem de todo o HTML.
A partir da sua quinta versão, o HTML até então estático, além das melhorias na estrutura e separação da semântica da estilização, ganhou interatividade com a criação da linguagem de programação JavaScript, e é nesse momento que surge o DOM.
Uma das melhores formas para entender um conceito, e é algo recorrente no universo da tecnologia, é fazer abstrações e analogias.
Estrutura
O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que antecede o document é o window, que nada mais é que a janela do navegador. Em sua estrutura, o document está no topo como objeto global e tem como elemento raiz a taghtml e todas as outras descendem dela através das suas ramificações (branchs).
A taghtml, objeto pai, apresenta dois objetos filhos: o head e o body (o cabeçalho e o corpo). Os objetos que seguem nas ramificações de baixo são denominados como child, e os de cima, parent. A taghead é parent da tagtitle, e a body é parent das tagsa e h1, e assim sucessivamente, de acordo com a hierarquia. Das tags, derivam os atributos, e destes, seus valores.
E a pergunta que surge é: mas o DOM faz parte do HTML ou do JavaScript? Na verdade, de nenhum, ele é gerado pelo browser. Ao carregar a página, o navegador cria o documento, a interface, e o Javascript usa o DOM para se conectar ao HTML.
Para realizar a comunicação entre eles é necessário inserir a tagscript no arquivo HTML, e como boa prática, ela deve estar antes do fechamento da tagbody para que os scripts sejam carregados após o código base.
É possível realizar de duas formas: escrevendo o código em JavaScript dentro da própria tagscript, ou inserindo o caminho relativo do arquivo externo. Também como boa prática, a segunda opção é a mais recomendada para a separação de responsabilidades e melhor manutenção do código.
<script>alert("Olá, Mundo!")
</script>
<scriptsrc="script.js"></script>
Maneiras de manipulá-lo
No DevTools do navegador, na aba Console, ao digitar console.dir (diretório) e passar o parâmetro document, é exibida uma lista com propriedades e funcionalidades do documento.
São várias as formas de navegação dentro do DOM, no JavaScript utilizamos o objeto document e através do ponto acessamos as propriedades e métodos, possibilitando selecionar, alterar, deletar, e criar elementos aos componentes do website, de acordo com a padronização criada pela W3Schools.
Para realizar essas ações temos alguns métodos, tais como:
document.getElementById();
document.getElementsByClass();
document.getElementsByTagName();
document.querySelector();
document.querySelectorAll();
document.createElement();
element.addEventListener();
Com o document.querySelector, por exemplo, dentre as opções que ele oferece, podemos alterar o texto no documento HTML:
Lembra que a janela do navegador é representada pelo objeto window? Utilizando outros exemplos, quando escrevemos a função alert ou o método write, é como se escrevêssemos dessa forma:
O DOM é um conjunto de objetos e sua estrutura de dados é representada através de um diagrama, ou de forma figurativa, uma árvore de objetos.
Quando se fala do desenvolvimento web básico, temos a tríade inseparável: HTML, CSS e JavaScript, cada um com o seu papel. Conhecer a base da programação e o que eles representam é essencial para poder avançar com frameworks e bibliotecas como Angular, Vue.js e React.
A tecnologia é uma área dinâmica, e assim como em diversos aspectos da nossa vida, não é necessário ter um dom para realizar algo, mas sim, estudo contínuo e muita prática.
A tradução do acrônimo inglês DOM (Document Object Model) significa Modelo de Documento do Objeto; trata-se da modelagem de todo o HTML.
A partir da sua quinta versão, o HTML até então estático, além das melhorias na estrutura e separação da semântica da estilização, ganhou interatividade com a criação da linguagem de programação JavaScript, e é nesse momento que surge o DOM.
Uma das melhores formas para entender um conceito, e é algo recorrente no universo da tecnologia, é fazer abstrações e analogias.
Estrutura
O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que antecede o document é o window, que nada mais é que a janela do navegador. Em sua estrutura, o document está no topo como objeto global e tem como elemento raiz a taghtml e todas as outras descendem dela através das suas ramificações (branchs).
A taghtml, objeto pai, apresenta dois objetos filhos: o head e o body (o cabeçalho e o corpo). Os objetos que seguem nas ramificações de baixo são denominados como child, e os de cima, parent.
A taghead é parent da tagtitle, e a body é parent das tagsa e h1, e assim sucessivamente, de acordo com a hierarquia. Das tags, derivam os atributos, e destes, seus valores.
E a pergunta que surge é: mas o DOM faz parte do HTML ou do JavaScript? Na verdade, de nenhum, ele é gerado pelo browser. Ao carregar a página, o navegador cria o documento, a interface, e o Javascript usa o DOM para se conectar ao HTML.
Para realizar a comunicação entre eles é necessário inserir a tagscript no arquivo HTML, e como boa prática, ela deve estar antes do fechamento da tagbody para que os scripts sejam carregados após o código base.
É possível realizar de duas formas: escrevendo o código em JavaScript dentro da própria tagscript, ou inserindo o caminho relativo do arquivo externo. Também como boa prática, a segunda opção é a mais recomendada para a separação de responsabilidades e melhor manutenção do código.
<script>alert("Olá, Mundo!")
</script>
<scriptsrc="script.js"></script>
Maneiras de manipulá-lo
No DevTools do navegador, na aba Console, ao digitar console.dir (diretório) e passar o parâmetro document, é exibida uma lista com propriedades e funcionalidades do documento.
São várias as formas de navegação dentro do DOM, no JavaScript utilizamos o objeto document e através do ponto acessamos as propriedades e métodos, possibilitando selecionar, alterar, deletar, e criar elementos aos componentes do website, de acordo com a padronização criada pela W3Schools.
Para realizar essas ações temos alguns métodos, tais como:
document.getElementById();
document.getElementsByClass();
document.getElementsByTagName();
document.querySelector();
document.querySelectorAll();
document.createElement();
element.addEventListener();
Com o document.querySelector, por exemplo, dentre as opções que ele oferece, podemos alterar o texto no documento HTML:
Lembra que a janela do navegador é representada pelo objeto window? Utilizando outros exemplos, quando escrevemos a função alert ou o método write, é como se escrevêssemos dessa forma:
O DOM é um conjunto de objetos e sua estrutura de dados é representada através de um diagrama, ou de forma figurativa, uma árvore de objetos.
Quando se fala do desenvolvimento web básico, temos a tríade inseparável: HTML, CSS e JavaScript, cada um com o seu papel. Conhecer a base da programação e o que eles representam é essencial para poder avançar com frameworks e bibliotecas como Angular, Vue.js e React.
A tecnologia é uma área dinâmica, e assim como em diversos aspectos da nossa vida, não é necessário ter um dom para realizar algo, mas sim, estudo contínuo e muita prática.
