Dúvida sobre o parentNode

Oi, Antônio, tudo bem ?

A diferença entre o campo.parentNode.querySelector('.mensagem-erro') e o campo.querySelector('.mensagem-erro') é que o primeiro busca o elemento com a classe "mensagem-erro" dentro do elemento pai do campo, enquanto o segundo busca dentro do próprio campo.

Já o querySelectorAll('.mensagem-erro') busca todos os elementos com a classe "mensagem-erro" na página, o que pode não ser o desejado, caso haja mais de um campo com essa classe.

No caso da validação de formulários, é comum utilizar o campo.parentNode.querySelector('.mensagem-erro'), pois a mensagem de erro é geralmente exibida próximo ao campo que não foi preenchido corretamente, e não necessariamente dentro dele.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

o elemento pai do span seria o fieldset, certo ? e qual seria a diferença entre buscar dentro do elemento pai e dentro do próprio campo ?

Oi, Antônio, como vai?

Sim, o elemento pai da tag <span> é a tag <fieldset>. Com relação à diferença entre buscar dentro do elemento pai e dentro do próprio campo, optamos por buscar no elemento pai usando a propriedade .parentNode para exibir a mensagem de erro próxima ao campo input que está sendo preenchido.

Buscar dentro do elemento pai refere-se a encontrar elementos em um contêiner específico, enquanto buscar dentro do próprio campo envolve interagir com o campo de entrada em si, obtendo ou manipulando seu valor.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!