DIV X SPAN e value x textContent

Fala Igor, tudo bem?

Vamos lá, a tag <span> geralmente é usada para agrupar elementos em linha no html. A tag <div> geralmente é utilizada para criar uma divisão ou uma seção em um documento HTML. Geralmente utilizamos <span> para textos ou palavras, e <div> para conteúdos mais completos, veja um exemplo:

<div>
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Veja que usamos a <div> para englobar todo um conteúdo, e usamos <span> para um texto em specifico (que geralmente fazer isso para estilizar somente aquela parte do texto para que fique diferente do restante do texto).

A diferença entre value e textContent é que textoContent nos retornará todo texto que estiver dentro de uma abertura e fechamento de tag, como por exemplo

<p>Esse é o meu texto</p>

Se dermos um textContent nesse <p>, será retornado Esse é o meu texto, porém se utilizarmos isso em um input que não possui fechamento de tag, nos retornará uma string vazia, então nesses casos que não queremos pegar o conteúdo daquela tag e sim o valor, utilizamos value.

Espero ter ajudado, bons estudos :D

Excelente explicação, Muitissimo obrigado Matheus.