Fiquei um pouco confuso quanto a referencia do seletor

Ao usar document.querySelector('input[type=tel]') em JavaScript, você seleciona o primeiro elemento <input> com o atributo type definido como tel. Se não houver nenhum elemento correspondente, o retorno será null.

Exemplo:

<input type="text" id="campoTexto">
<input type="tel" id="campoTelefone">
<input id="campoEmail">

const inputTel = document.querySelector('input[type=tel]');
console.log(inputTel); // Retorna o elemento <input type="tel" id="campoTelefone">

const inputEmail = document.querySelector('input[type=email]');
console.log(inputEmail); // Retorna null, pois não há nenhum <input> com type="email"

Neste exemplo, inputTel selecionará o elemento <input> com type="tel" (campo de telefone), enquanto inputEmail retornará null porque não há nenhum <input> com type="email".

Se você usar document.querySelector('input') em JavaScript sem especificar um atributo type, ele selecionará o primeiro elemento <input> que encontrar no documento, independente do tipo. Isso significa que será escolhido o primeiro <input> presente no HTML, não levando em consideração se ele possui um atributo type ou não.

Por exemplo:

<input type="text" id="campoTexto">
<input type="tel" id="campoTelefone">
<input id="campoSemTipo">

const inputSemTipo = document.querySelector('input');
console.log(inputSemTipo); // Retorna o elemento <input type="text" id="campoTexto">

Neste caso, inputSemTipo selecionará o primeiro <input> encontrado, que é o campo de texto (type="text"). Ele não leva em conta se o atributo type está presente ou não, apenas seleciona o primeiro elemento <input> disponível no documento.