0

DOM - Parte 2 (Seletores)

#JavaScript
Paulo Alexandre
Paulo Alexandre

Selecionando o DOM

Agora que sabemos como acessar o DOM usando Javascript, precisamos encontrar uma maneira de selecionar elementos individuais (ou grupos deles). Fazer isso nos dará acesso a todos os elementos ativos e nos permitirá manipulá-los.


Para manipular elementos no DOM, precisamos selecioná-los. Existem muitas maneiras de fazer isso; por exemplo, podemos selecionar o body e o head apenas pedindo por eles (document.body, document.head). Mas, quando queremos ir mais fundo, é aí que as coisas ficam complicadas. Felizmente, o documento possui vários métodos integrados para acessar os elementos exatos que desejamos.


É importante observar que todos esses métodos diferenciam maiúsculas de minúsculas (Case Sensetive). Se você não tiver certeza do caso ao usá-los, consulte a documentação oficial.


Método getElement

Esses são os métodos originais para selecionar elementos do DOM. Cada um deles recebe uma única string como único argumento, contendo o id ou a classe que você está procurando.



document.getElementsByTagName(‘p’);

Este método tomará uma única string como argumento contendo o nome do elemento dos elementos que você deseja selecionar. Ele retornará um objeto semelhante a um array denominado HTMLCollection contendo todos os elementos que contêm o nome do elemento fornecido. Discutiremos o que é o HTMLCollection depois de falar sobre o restante de nossos métodos de seletor.



document.getElementById(‘idName’);

Este método pegará uma única string como argumento contendo o id de um elemento, pesquisará no DOM e retornará o elemento correspondente.


document.getElementsByClassName(‘className’);

Este método tomará uma única string como argumento contendo a classe dos elementos que você deseja selecionar. Ele retornará um objeto semelhante a uma matriz, denominado HTMLCollection, contendo todos os elementos que contêm a classe fornecida.


Métodos querySelector

Estes são os métodos de seleção de elemento mais novos adicionados ao DOM. Esses métodos nos permitem selecionar elemento(s) com base em seletores de estilo CSS. Cada método pega uma string contendo os seletores e retorna o(s) elemento(s). Nota - podemos selecionar por elemento, id, classe ou outros com ambos os métodos.


document.querySelector(‘.custom-style’); 

Este método irá procurar e retornar o primeiro elemento que corresponda ao valor passado para o método. Lembre-se de que a maior mudança em relação aos métodos de seleção do DOM mais antigos é que agora precisamos passar o seletor CSS adequado para o argumento.


Se aprovássemos (‘estilo personalizado’) e não (‘.EstiloPersonalizado’), teríamos um erro.


document.querySelectorAll(‘queryString’);

Este método pesquisará e retornará TODOS os elementos correspondentes à string de consulta. Este método retorna esses elementos em um objeto semelhante a um array chamado NodeList - importante lembrar que ele não é um array prorpriamente dito, (e.g. Array like), ou seja metodos do tipo Array não estão presentes aqui.


A diferença entre HTMLCollection, NodeList e Array

Quando usamos getElementsByClassName () ou querySelectorAll (), obtemos um HTMLCollection ou um NodeList respectivamente. Referimo-nos a estes como "objetos semelhantes a matriz". Já vimos um objeto semelhante a uma matriz (o objeto de argumentos em uma função). Ambos têm índices numéricos baseados em zero e a propriedade length, mas isso é tudo o que compartilham com um Array. NodeList dá um passo adiante e tem acesso a .forEach. Não há .reduce ou .map ou qualquer outro método de matriz.


Dica profissional: a classe Array contém um método que podemos usar para criar uma matriz a partir de um objeto semelhante a uma matriz, chamado .from(). Para usar isso, daríamos. Do objeto semelhante a um array como seu único argumento.

Exemplo:

Array.from(arrayLikeObject)


Agora tente selecionar seu HTML usando esses seletores e no caso de listas preste atenção como esses elementos se comportam e você verá por exemplo que eles não são Arrays.


Continua...

0
48

Comentários (0)

Front End Developer

Estados Unidos