Minha dúvida é, por que usar data atribute e não usar o ID, qual a diferença? não teria o mesmo resultado?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Minha dúvida é, por que usar data atribute e não usar o ID, qual a diferença? não teria o mesmo resultado?
Seria uma opção, mas o ID precisa ser único então precisaria de seletores muito alinhados pra pegar os conteúdos ou replicar os ID's (O que não deve acontecer), então uma das formas de resolver essa questão é usar o date-atribute que é mais semântico.
Então, basicamente 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:
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.
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, 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, se torna 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, 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.
Obrigado pela explicação, Thayná!