Qual a forma mais correta de resolver?

Olá, Luiz, tudo bem?

A maneira como você resolveu o exercício está correta e é uma prática comum em JavaScript. Adicionar uma classe a cada elemento e, em seguida, selecionar todos os elementos com essa classe é uma maneira eficiente de agrupar elementos semelhantes.

No entanto, se você quiser evitar a adição de classes a cada elemento, você também pode selecionar todos os elementos dentro de um elemento pai. No seu caso, você poderia selecionar todos os elementos 'input' dentro da seção 'teclado'. Aqui está um exemplo de como você pode fazer isso:

const listaDeTeclas = document.querySelectorAll('.teclado input');
console.log(listaDeTeclas);

Neste exemplo, '.teclado input' é um seletor CSS que seleciona todos os elementos 'input' que são filhos do elemento com a classe 'teclado'. Isso retornará a mesma lista de teclas que o seu código original.

Ambas as abordagens são válidas e a escolha entre elas depende do seu caso de uso específico. Se você tem elementos semelhantes que não estão todos contidos em um único elemento pai, ou se você quer ter mais controle sobre quais elementos são selecionados, adicionar uma classe a cada elemento pode ser a melhor opção. Por outro lado, se todos os elementos que você quer selecionar estão contidos em um único elemento pai, selecionar os filhos desse elemento pode ser mais eficiente.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!