Manipulando o DOM Parte 3 com JavaScript

Manipulando o DOM Parte 3 com JavaScript

04/08/2018 0 Por Alisson Suassuna

Olá pessoal, hoje vamos estar finalizando a série de artigos, Manipulando o DOM com JavaScript, essa é a terceira parte da série, e para aqueles que não leram os outros artigos aqui está o link (parte1 e parte2). Neste aprenderemos como navegar na DOM a partir de um determinado elemento HTML, como sabemos o DOM tem uma estrutura de árvore e é possível percorre-la. Muitos termos usado nesta publicação já foi explicado nos anteriores, recomendo a aqueles que ainda não leram, ler para ter maior entendimento de todo o conteúdo tratado nestes trés artigos.

Vamos ao código base – Manipulando o DOM

Neste código base, aplicamos uma simples estilização CSS para facilitar nosso entendimento, uma tag <div> dentro nesta temos uma tag <p>, depois uma tag <ul> junto com suas <li>. E por fim outra tag <div> com outra tag <p>.

Capturando parentes dois elementos

Nesta primeira linha de código estamos selecionando o elemento do HTML, caso não esteja familiarizado com essa sintaxe recomendo dá uma olha nos artigos anteriores, parte 1 e parte 2 dessa série. Na variável “lista” tenho guardado o elemento <ul>, mas não é isso que estamos fazendo aqui, queremos selecionar o pai desse elemento, no caso é justamente o que o parentNode faz, como mencionei ao longo dessa série o DOM é uma estrutura em árvore, ou seja, temos elementos a cima onde chamamos de (elemento pai) e elementos a baixo que chamamos de (elemento filho), o parentNode seleciona o elemento pai a partir de um outro. Vamos ver o resultado no console do navegador.

Manipulando o DOM

Console do browser

Como podemos observar selecionamos o elemento pai da tag <ul> que em nosso código base trata-se de um elemento do tipo <div>

Capturando os filhos


Manipulando o DOM

Console do browser

O childNodes irá selecionar todos os elementos filhos, no caso todas as tags <li>, note que temos a seguinte estrutura trazida pelo childNodes; text, li, text , li, text, li, text, veio trés elementos esperando, mas veio quatro textos que estão atrapalhando a manipulação do DOM. Como podemos evitar esse “problema”? Simples removendo os espaços do nosso documento HTML.


Esse é um efeito colateral de se usar o childNodes pois ele irá trazer todos esses espaços entre os elementos do documento HTML.

Capturando o primeiro elemento


Manipulando o DOM

console do browser

Observe que será capturando um “text” por causa dos espaços em branco do nosso documento HTML, para de fato selecionar o nosso primeiro elemento que será uma tag <li> precisamos da função nextSibling.


Manipulando o DOM

Console do browser

nextSibling seleciona o próximo elemento, em nosso caso a tag ” <li>João</li>”, como o firstChild capturou o primeiro elemento que foi um “text’, podemos notar que, esses métodos mostrado até aqui, levam em consideração os espaços em branco, e interpretam como text. Veja com mais detalhe a imagem.

Manipulando o DOM

Imagem explicativa do código (problema do text)

Capturando o último elemento


Como já sabemos o valor mostrado para esse console.log será um “text” e para de fato obter o nosso resultado desejado que é capturar o ultimo elemento dessa tag <ul> escrevemos a função previousSibling.


Manipulando o DOM

Imagem do console do browser

Fazendo seleção de elementos sem os espaços do HTML


Manipulando o DOM

Imagem do console do browser

A função children de fato trás somente os filhos dos elementos selecionado, note  que temos uma pequena diferença no tipo de elemento, HTMLCollection em comparação aos anteriores, agora eles são do tipo NodeList, não vou entrar em detalhes aqui sobre esses dois tipo porque já foi explicado nos artigos anteriores dessa série, caso não tenha lido, recomendo a leitura.

Capturando o primeiro elemento, sem os “text”


Manipulando o DOM

Imagem do console do browser

O mesmo vale para o último elemento.


Manipulando o DOM

Imagem do console do browser

Usando as funções em comjuntos


Aqui estamos dizendo para selecionar o elemento irmão anterior ao parent da variável “lista”.

Manipulando o DOM

imagem do browser

Nossa variável “lista” representa o elemento <ul> que contém trés <li> o parentNode representa a <div> que está envolvendo a <ul> e o previousElementSibling é o elemento anterior, em nosso código base é a <div> a cima.


Aqui temos a mesma lógica só que estamos selecionando o próximo elemento, e não o anterior.

Considerações Finais – Manipulando o DOM

Passamos por vários recursos do JavaScript ao longo desses trés artigos sobre manipulação do DOM. A ideia desses artigos foram trazer uma visão geral de todos os recursos que a linguagem nos oferece, e que podemos utilizar para fazer uma manipulação correta do DOM. Caso não tenha lido os outros artigos vou está likando aqui novamente, e se gostou deixa seu like, e se deixei passar algum detalhe, deixa seu comentário, e compartilhe com todos seus amigos que estão querendo aprender mais sobre esse assunto.

Manipulando o DOM com JavaScript parte 1

Manipulando o DOM com JavaScript parte 2

Recomendações de Estudos

O curso que vou está recomendando a vocês hoje é o Curso Web Moderno com JavaScript! COMPLETO 2018 + Projetos, criado pelo professor Leonardo Moura Leitao, um dos cursos mais completos que já vi, já são mais de 400 aulas postadas e ainda está em desenvolvimento ótimo curso, vale cada centavo.

O que aprenderei?

  • Tudo que vc precisa saber para construir aplicações modernas para Web
  • HTML, CSS, JavaScript, React, VueJS, Banco de Dados e muito mais

  • Base sólida de Javascript com os novos recursos da linguagem

  • Funções, Objetos, Array, Prototype, Clousure…
  • Usar JS para interagir com o DOM, requisições Ajax, ferramentas de build (Webpack e Gulp)
  • Paradigmas de programação aplicados em JS
  • Criar projetos integrando o que aprendemos no curso

Recomendação de Livro

Esse livro é muito bom pessoal, quem deseja se tornar um ótimo profissional Front End precisa ler.

Resumo do Livro

Bem-vindo a uma melhor maneira de aprender HTML & CSS. Se você quer projetar, construir do zero ou ter mais controle sobre um site existente, este livro lhe ajudará a criar conteúdos atrativos e amigáveis. Sabemos que código pode ser um pouco intimidador, mas dê uma olhada e veja como este guia difere dos livros de programação mais tradicionais.