Dicas de manipulação do DOM em JavaScript

Pensei em fazer uma colaboração com meus 10 centavos de conhecimento em javascript, mas que acho que pode ajudar a quem está iniciando do zero.

  • Primeiramente, na aula 1 de JS básico, foi disponibilizada uma apostila, que apesar de estar em uma ordem um pouco confusa, tem bastante conteúdo que pode ajudar a quem está iniciando na linguagem, e ficou um pouco perdido com as aulas do JC.

  • O tópico a seguir foi feito a partir da minha base de conhecimento de estudo da liguagem nos últimos 4 meses, quando comecei do zero também. Logo, sugestões e correções são mais que bem vindas!

    Manipulação do DOM (Document Object Model)

    O DOM é uma interface entre o HTML e o javascript. Utilizamos ele ao manipular elementos HTML, no arquivo JS linkado, ou na tag do hmtl.
    Sempre que é manipulado um elemento html através do JS, é feita uma alteração no DOM, e essa alteração é refletida automaticamente na tela.
    Para acessar um elemento html, usamos:
    document.metodoParaAcessarElemento(“tag/id/class”)
    O conteúdo do elemento acessado, pode ser armazenado em uma variável, para facilitar a vida de quem está programando, caso precise apontar/modificar esse elemento algumas vezes.
    exemplo:
    let elementoX = document.getElementById(“textoX”)

    Existem alguns métodos que podemos utilizar para acessar esses elementos, e cada um tem uma característica. São eles:
    document.getElementById()
    document.getElementByClassName()
    document.getElementByCTagName()
    document.querySelector()
    document.querySelectorAll()

    .getElementById()
    Como descrito no próprio nome, ele pega um elemento pelo Id. Logo, para utilizar este método, o elemento em questão precisa estar identificado com um id, e como uma id só pode pertencer a um elemento, ele irá retornar exatamente o que está buscando.

    .getElementsByClassName()
    Bom, esse também é fácil de entender. Este método captura elementos pelo nome da classe que o elemento foi identificado. Porém, aqui como sabemos, múltiplos elementos podem ser identificados com a mesma classe, e aí que precisamos ficar atentos. Diferente do método acima, ele não retornará apenas um elemento, mas sim um html collection, semelhante a array, com todos o elementos que possuem a mesma classe. Mesmo que apenas um elemento tenha o className indicado, será retornado um html collection de um elemento no índice 0.

    .getElementsByTagName()
    Este método requer a mesma atenção que o anterior, já que podemos utilizar uma tag várias vezes. Então o retorno deste método é um html collection com todas as vezes que essa tag foi utilizada. Porém, se por exemplo eu tenho 3 vezes a tag ul no meu arquivo html, mas eu já sei que quero acessar apenas a 2° ul, posso indicar da seguinte forma:
    document.getElementsByTagName(“ul”)[1]

    Observações:
    - Os 3 métodos getElement… são vivos. Isso significa que se seu valor foi armazenado em uma variável, e após isso, forem feitas modificações nesse elemento, o valor da variável será atualizado sempre que houver alteração (até porque a variável neste caso na verdade guarda uma referência do elemento, não ele em si), logo não se faz necessário chamar document.getElement… novamente.
    - HTML Collections são lista interativas que se modificam conforme o documento é alterado no DOM. Seu retorno é uma coleção de objetos html, organizados em um array, o que permite utilizar métodos de array nessa lista.

    .querySelector()
    Retorna a primeira ocorrência do elemento indicado. Pode ser indicado tanto tag, como id e class.
    Este método recebe uma sinalização parecida com CSS para indicar se o nome indicado para buscar um elemento é uma tag, id, ou class. Então, para tag, basta apenas escrever o nome da tag em questão entre aspas. Porém, para indicar um id, deve-se utilizar # antes do nome (exemplo: ("#primeiroId"). E para sinalizar que trata-se de uma classe, utilizar . antes do nome (exemplo: (".barraNavegacao").

    .querySelectorAll()
    Este método possuí as mesmas regrinhas de identificação para classe e id, do descrito anteriormente. A diferença é que esta, retorna todas as ocorrências do elemento indicado, tanto para classe quanto tag.
    Diferente do getElementsByClassName() e getElementsByTagName(), o querySelectorAll() retorna um node list contendo nós de elementos. Uma node list é parecida com um array, mas não possuí os mesmos métodos de um array, o que as vezes acaba sendo menos prático. Outro ponto, é que caso queira acessar um elemento específico, deve-se passar o índice em que ele está nessa node list, assim como é com array.

    Observações:
    - O .querySelectorAll() retorna uma node list estática, isso significa que mesmo que no DOM sejam adicionadas novas tags, o nodelist continuará mostrando o número de itens inicial.
    - Um ponto interessante do .querySelectorAll é que ele te permite acessar elementos filhos (contidos dentro de outro elemento). Por exemplo, tenho uma tag ul com id=“lista2”, que contém 3 tags li, e quero acessar apenas as ‘lis’. Neste caso posso acessar da seguinte forma:
    let lis = document.querySelectorAll("#lista2 li")
    O que será armazenado na variável lis é uma node list com as 3 li do nó da ul.
    - Node List são coleções de nós retornadas pelos métodos document.querySelectorAll() (coleção estática), e Node.childNodes (coleção viva).

Por fim, existem muitas maneiras de navegar entre os nós, o que ajuda bastante a acessar alguns elementos que estão pertinho de algum elemento já “capturado” no nosso JS. Caso se interessem, posso fazer outro post sobre isso, ou editar esse.

18 Likes

Uma curiosidade sobre DOM:

DOM e HTML não são a mesma coisa. DOM eh uma API que o navegador disponibiliza para que o JavaScript possa interagir com o conteúdo que está presente, por exemplo, na Página Inicial de um site. Document Object Model, assim como o nome já diz, é um Objeto que, independentemente do HTML e sua estrutura (bem como os seus erros), sempre mostrara ao navegador uma versão correta.

Por exemplo, imagine que vc esqueça de fechar uma tag corretamente:


<p>Ola mundo!<p> 

O certo seria:


<p>Ola mundo!</p> 

Independente disso, o DOM irá renderizar uma cópia correta mesmo com os erros apresentados no arquivo .HTML.

Se vc ainda estiver com dúvida, pense assim: o arquivo HTML que vc digita eh apenas uma string. Quando o navegador ler essa string, ela vai ser transformada em um objeto, que eh o DOM.

4 Likes

Se isso são 10 centavos, imagina um real hahah ta ótimooo!

5 Likes

Sim sim, por isso disse que trata-se de uma interface entre HTML e javascript. Mas vou editar depois explicando melhor que é uma API e tudo bonitinho.

1 Like

Obrigada :smiley:

Até queria ter explicado sobre nós e como navegar entre eles, mas já estava bem grande.

Tava pensando também em fazer um outro tópico falando sobre this, e quando é este é um objeto local, ou global. Vamos ver se consigo um tempinho pra isso.

2 Likes

Se fizer, com certeza vou ler. Estou esperandoooo :slightly_smiling_face: :slightly_smiling_face:

2 Likes

Muito obrigada por compartilhar @ReBandeira :tulip:

2 Likes

obrigada pelo post Re! adorei

2 Likes