Rodrigo Brito

Selecionando elementos do DOM

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Podemos selecionar os elementos do DOM de diferentes formas.

Seleção pelo id (#)

A primeira forma e mais comum é pelo id, através do método getElementById, que selecionará um elemento no DOM pelo nome do seu atributo id (identificador exclusivo que deve ser único por todo o documento) sem cerquilha (#). Ex:

Selecionando pelo id skills:

O retorno contém todos os atributos, métodos e propriedades da variável skillsSection como um objeto.

Caso o id não exista o retorno será null;

Seleção por Classe ou tag

Para selecionar por classe é utilizado o método getElementsByClassName e para tag getElementsByTagName e retornam uma lista de elementos do DOM. Esta lista retornada será atualizada caso novos elementos sejam adicionados dinamicamente. Ex:

Selecionando pela classe grid-section:

Mais de uma classe pode ser selecionada, e são passadas uma ao lado da outra sem vírgulas. O elemento retornado será o que contiver ambas classes passadas como parâmetro. Ex:

Selecionando pela tag ul:

O retorno será um HTMLCollection (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 da lista).

Para acessar um dos elementos desta coleção, basta selecionar o índice e passar entre colchetes. No exemplo acima, console.log(ul[0]) retornaria a tag ul.

Seletor Geral Único

O querySelector retorna o primeiro elemento que combinar com o seletor CSS.

• const skills = document.querySelector('.skills'); //Retorna o section com a classe skills
• const contact = document.querySelector('#contact'); //Retorna o section com o id contact
• const lastItem = document.querySelector('.skills-list li:last-child'); //Retorna o último li do elemento com a classe skill-list (o ul)
• const linkCSS = document.querySelector('[href^="https://"]'); //Retorna o primeiro item com o atributo href e que começa com https://, nesse caso o link das fontes do google no link da head
• const firstUl = document.querySelector('ul'); //Retorna o primeiro elemento com a tag ul

Podemos selecionar elementos dentro de uma seleção. Ex:

Seletor Geral Lista

Para selecionar vários elementos compatíveis com um seletor CSS utilizamos o querySelectorAll. O retorno será uma NodeList (objetos NodeList são coleções de nodos semelhantes aos objetos retornados pelos métodos Node.childNodes e document.querySelectorAll). Ex:

Para retornar um dos elementos da NodeList, basta acessar pelo índice ([n]). Ex: console.log(title[1]).

Diferente do getElementsByClassName, a lista aqui é estática (não é atualizada dinamicamente).

Além da estaticidade, a NodeList se diferencia de um HTMLCollection em suas propriedades e métodos. Ainda assim, ambos são um Array-Like (se parecem com um array mas não são). Contudo é possível transformar um array-like em um Array verdadeiro utilizando o método Array.from().