Qual a diferença entre ID, class e data-attributes para percorrer o DOM?

O artigo do site da Alura explica a diferença sobre o id e class. Clique aqui

Sobre o uso de data attributes, você pode consultar a documentação oficial MDN Web Docs. Clique aqui

Bons estudos.

Boa tarde Robert, tudo em? Então, realmente não há diferença entre utilizar um ou outro, mas para esta função de percorrer o DOM eu aconselho fortemente utilizar o data-atributes por dois motivos:

1. Convenção: Ao longo do seu aprendizado em programação, você vai ouvir muito isso de convenção, ou seja, da para fazer a mesma coisa de várias maneiras, porém existe uma que a comunidade aderiu como sendo a maneira correta, e é importante já ir se acostumando a utilizar essas convenções, pois faz diferença no futuro, quando por exemplo, você for trabalhar em um projeto com outras pessoas, elas já esperam que você conheça e utilize essas convenções, e fica mais fácil de uma dar manutenção no código da outra, já que todas seguem as convenções.
2. Evitar erros: Vamos supor que no seu projeto há dois botões, um de adicionar algo, e um de remover, e ambos utilizam a mesma estilização, e portanto, a mesma classe. Perceba que se você utiliza a classe para percorrer o DOM, pode causar erros, já que os botões possuem propósitos diferentes, mas esteticamente são iguais. "Ah Matheus, mas eu posso adicionar uma nova classe em cada um dos botões, para diferencia-los". Ok, mas a medida que seu projeto vai crescendo, você começa a se perder, e não sabe se aquela classe está sendo utilizada só para estilo, ou se é só para o DOM, ou se é para as duas coisas, e começa a ficar confuso e demorado para dar manutenção.

Portante, eu considero importante separar as coisas: Se o meu tem class e data-atributes, eu sei que se por algum motivo eu remover aquela classe, só vou estar deletando o seu estilo, porém a funcionalidade implementada no javascript continua, e vice-versa, se eu removo o data-atribute, eu sei que o estilo vai se manter. "Ah Matheus, eu prefiro utilizar classe ou id no DOM". Ok, então utilize um dos dois no projeto todo, não fique misturando no DOM: Uma hora você chama com a tag HTML, outra hora você chama pelo id, outra hora pela classe...Isso vai deixar o seu código confuso para as outras pessoas que forem visualizar/mexer nele. Espero ter ajudado, essa é minha opinião sobre o assunto. Desculpa pelo textão kkkk abraço. Qualquer dúvida comenta ai.

Cara, muito interessante e irei me aprofundar mais nessas convenções, pois o meu foco é aderir boas práticas não só para as linguagens mas para o meio de trabalho, pois eu quero trabalhar em front, muito obrigado!

Boa Robert, é isso mesmo. A aplicação dessas boas práticas, mesmo em projetos pequenos ou que só você terá acesso, faz uma diferença grande lá na frente, pois você já estará acostumado a trabalhar e desenvolver desta forma, e isto é visto com bons olhos pelas empresas e recrutadores na hora de analisar seu portfólio. Parabéns pela atitude.