1
resposta

[Dúvida] Dúvida com a linha de código evento.target.elements['nome']

Prezados,

reparei que utilizamos, no exemplo as duas linhas de código dentro da função:

form.addEventListener("submit", (evento) => {

evento.preventDefault()        
const nome =  evento.target.elements['nome']
const quantidade =  evento.target.elements['quantidade'] 
...}

Neste caso, fiz o teste utilizando o document.getElementById e funcionou da mesma forma (conforme abaixo). Gostaria de saber qual a diferença entre o document.getElementById e evento.target.elements.

document.getElementById('nome')
document.getElementById('qunatidade')
1 resposta

A diferença é basicamente que quando você utiliza o document.getElemntById.... você procura no documento inteiro, já no event.target.elements... Você está procurando dentro do evento de submit no caso o formulário que foi construído no HTML, assim sendo mais fácil de ler e encontrar o campo que se refere, não sei te informar se isso deixa o código mais rápido, mas melhora na leitura para ajustes futuros. Mas ambos encontram o elemento com o ID escolhido.

na imagem abaixo você consegue ver o evento de submit do formulário ele tem 3 targets sendo 2 deles o nome e quantidade e outro sendo cadastrar