Usar o $ tanto para o querySelector quanto querySelectorAll

Oi Leandro, acho que você precisa associar ao $ uma função sua que faça uso do querySelector e querySelectorAll, algo assim:

let $ = (seletor) => {
   return document.querySelector(seletor) || document.querySelectorAll(seletor);
}

Oi Leando, tudo bem? Você pode fazer com que uma função anônima faça esse papel dentro de $ com um condicional. Essa é uma possível implementação.

const $ = function(selectot){
    if(this.querySelectorAll(selector).size() > 1){
        return this.querySelectorAll(selector);
    }
    return this.querySelector(selector);
}.bind(document);

Lembrando que isso é uma meta implementação, com certeza você pode melhorar isso. Testa pra ver se funciona? O uso seria algo:

const div = $('.div-selecionada-por-classe');

Você pode usar $ sempre como querySelectorAll. No curso, não havia essa necessidade, mas é uma prática que eu adoto.

Então, como ele sempre retorna um NodeList por mais que exista penas um elemento na seleção, você pode fazer assim quanto quiser pegar um elemento apenas:

let elemento = $('#botao')[0];

Se quiser pegar todos

let elementos = $('button');

Ainda assim, é menos verboso do que usar document.qoerySelectorBlablabla.

Tranquilo meu aluno?

Ou se você quiser seguir o caminho do Anderson e quiser escrever mais pode fazer isso:

const $ = selector => {

    const selection = document.querySelectorAll(selector);

    if(!selection) return [];

    if(selection.length == 1) {
      selection = selection[0];
      selection.forEach = cb => {
        cb(selection);
      }
    }

  return selection;
}

// não importa se p é um elemento apenas um NodeList, o forEach funcionará. 

// se o resultado por um único elemento, será o elemento, se for mais de um elemento, um array.

// se não retornada nada o forEach não será processado e nenhum erro acontecerá. 

$('p').forEach(p => console.log(p.textContent));

Ahh, agora sim... hehe

Alberto Souza, este caso não deu certo pois sempre retorna a primeira condição do ||. Wanderson Macêdo, seu exemplo funcionou, mas tive que trocar o método size() pela propriedade length.

Prof. Flavio, essa foi a conclusão que cheguei, em usar apenas o querySelectorAll, só não sabia se era o "mais correto" ou algo do tipo. Já seu outro exemplo é também bem interessante.

Os exemplos são ótimos, vou dar uma melhor estudada nos casos e aplicar os conceitos. Obrigado pelas dicas ai gente, um dia chego no nível de vocês hehe.

E Prof. Flavio, parabéns por seus cursos.

Valeu Leandro! A boa notícia é que ainda temos mais dois cursos pela frente! Segue que segue futuro cangaceiro em JavaScript!