Oii Sergio, tudo bem?
No JavaScript, quando queremos selecionar elementos do DOM usando document.querySelector
, podemos usar diferentes tipos de seletores. Como você mencionou, usamos o ponto (.) para classes e o sustenido (#) para IDs. No caso de atributos, como o type
em um input
, usamos os colchetes para especificar o atributo e seu valor.
No seu exemplo, document.querySelector('input[type=tel]')
está correto para selecionar um elemento input
cujo atributo type
é igual a tel
. Isso é muito útil quando queremos ser mais específicos na seleção de elementos que não possuem uma classe ou ID único, mas podem ser identificados por outros atributos.
Suponha que você tenha vários inputs em uma página, mas apenas um deles é do tipo 'tel'. Usando o seletor document.querySelector('input[type=tel]')
, você conseguirá selecionar especificamente esse input, independentemente de sua posição na página.
Espero que essa explicação tenha esclarecido sua dúvida sobre como usar seletores de atributos em JavaScript.
Um abraço e bons estudos.