Manipulando o DOM Parte 1 com JavaScript

Manipulando o DOM Parte 1 com JavaScript

14/05/2018 4 Por Alisson Suassuna

A dica de hoje é  manipulando o DOM, uma das tarefas mais básicas de um desenvolvedor front-end, devido a isso deixamos de usar por muitas das vezes todo o potencial que o JavaScript oferece, mas antes disso vamos entender o que é esse tal de DOM?

DOM (DOCUMENT OBJECT MODEL)

O DOM (Document Object Model) é uma interface que representa como os documentos HTML e XML são lidos pelo seu browser. Após o browser ler seu documento HTML, ele cria um objeto que faz uma representação estruturada do seu documento e define meios de como essa estrutura pode ser acessada.

Manipulando o DOM

Imagem que representa o DOM

VAMOS PARA O CÓDIGO

O JavaScript oferece várias maneiras de selecionar um elemento em páginas HTML desde as mais genéricas até as mais especificas, Vamos a elas uma por uma e explicar detalhadamente o que cada uma faz.

Primeira forma – Manipulando o DOM

Estou selecionando um elemento (tag) cujo o atributo “id” seja igual ao nome “primeiro” a partir daí podemos fazer qualquer manipulação com este elemento, neste exemplo estou aplicando uma classe (efeito-css).

Segunda forma – Manipulando o DOM

Aqui estamos dizendo o seguinte, oh amigo JavaScript vai lá no HTML e selecione todos os elementos que seja do tipo (div), note que Elements está no plural ou seja será selecionado todas. O tipo dessa lista é um HTMLCollection que é uma interface que representa uma coleção genérica (objeto array) de elementos (na ordem em que aparecem no documento) e oferece métodos e propriedades para selecioná-los, para saber mais sobre clique aqui. Recomendo sempre transformar esse HTMLCollection em um array javascript para que possa usufruir de toda a API de array da linguagem, e para fazer a conversão escrevemos o seguinte código Array.from(divs) outra forma de fazer esse conversão é utilizando o operador spread (ES6) const newdivs = […divs]

Terceira forma

Essa terceira forma de selecionar todos elementos cujo o atributo class seja iqual a (‘ultimo’) note que também será retorna um HTMLCollection, e novamente recomente que faça a conversão para um array javascript caso vá fazer algum tratamento. 

Quarta Forma

A função querySelector é a que mais utilizo no meu dia-a-dia ela possui uma grande variedade de  formas de selecionar elementos do DOM, neste exemplo estou selecionando o elemento que tenha um atributo ID cujo o nome seja primeiro, o uso da # é a maneira de identificar que trata-se de um ID.

document.querySelectorAll  retorna uma lista de seletores (elementos) do tipo NodeList que são coleções de nós, para saber mais sobre clique aqui. Diferente das funções  document.getElementById e getElementsByTagName que retorna um HTMLCollection. O nodelist é coleção limitada e alguns métodos da API não funcionam como o map()  e reduce().
O HTML 5 permite a criação de atributos personalizados, e com a função querySelector() também é possível fazer manipulação com esses atributos, note que para fazer a seleção correta precisamos escrever o nome do atributo entre [colchetes ].
Recaptulando:
#      –  seleciona  IDS
       –  seleciona  Class
[]      –  seleciona  Atributos personalizados
—————————————————————————————————————————————
Existe mais formas de manipulação de DOM mas, para o post não fica grande demais vou dividir em duas parte, essa é a parte 1. A parte 2 já está disponível no site gente. link: Manipulando DOM Parte 2

[Olá gente, esse espaço foi criado para compartilhar conhecimento, caso eu tenha errado algo por favor deixe nos comentários que terei o prazer de fazer a correção e citar o autor.]

By: Alisson Suassuna