Pegando o Valor da input

Oi Elton, a diferença é a navegação no DOM, enquanto em uma forma você faz diretamente no elemento, na outra, você navega pelos elementos. Essa é a única diferença que vejo.

A outra pode ser que, enquanto você navega no DOM para cada elemento, na primeira, você navega até um elemento e dele consegue ir até os outros dentro de uma mesma referência.

Elton basicamente seu código terá o mesmo efeito, mas existe certos detalhes a serem tomados.

Imagine que vamos buscar um input pelo seu id:

let input = document.querySelector('#input');

Ja fizemos a busca da input e com ela na memória podemos logar seu valor:

console.log(input.value);

Da mesma forma como você comentou, poderíamos fazer tudo em uma única linha:

console.log(document.querySelector('#input').value);

Mas com esse tipo de código você tem que ter certeza da existência do elemento na página, pois do contrário o js irá dar erro de execução alegando que você esta tentando pegar o valor de um objeto undefined, ou seja, adicionando o objeto em variável conseguimos tratar sua existência:

let input = document.querySelector('#input');
if (input)
    console.log(input.value);

Espero ter ajudado.

Na aula o professor disse que acessamos os inputs pelo atributo name, mas depois percebi que um dos meus inputs estava sem name e mesmo assim funcionava =/

Por essa postagem posso deduzir que na verdade depois que selecionamos form, acessamos seus filhos de forma literal através do id, certo?

Obrigada desde já,

Luana Fernandes

Exatamente Luana, podemos acessar os filhos de form tanto pelo name como pelo id de forma semelhante:

<form action="">
    <input name="teste" type="text">
</form>

No exemplo acima poderiamos acessar via name:

<script>
    const form = document.querySelector('form');
    console.log(form);
    console.log(form.teste);
</script>

Se trocarmos o name por id:

<form action="">
    <input id="teste" type="text">
</form>

E rodar o mesmo código:

<script>
    const form = document.querySelector('form');
    console.log(form);
    console.log(form.teste);
</script>

Iremos ter o mesmo resultado, ambos irão imprimir o objeto input no nosso console.

Espero ter ajudado.