JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos
Publicado em 17/01/2021 20h46
Visualizações: 301

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:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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;

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

Selecionando pela tag ul:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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:

JS-0303 - JavaScript Completo ES6 - Seleção de Elementos

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().

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.