¿Cómo funciona form.nombre.value?

Imagínate que son 3 cajas (una dentro de la otra)=> VALUE está dentro de NOMBRE y NOMBRE está dentro de FORM. Así que si necesitas acceder a VALUE: 1°debes entrar a la caja FORM y de allí sacar la caja NOMBRE 2° de la caja NOMBRE debes sacar la caja VALUE.

Te comparto una imagen que hice, ojalá se pueda ver bien.

Agradezco tu respuesta, entiendo el concepto, y la imagen ayuda mucho para ello. Pero lamentablemente sigo sin entender cómo es que JS comprende a qué campo dentro del form me estoy refiriendo al hacer form.nombre, ya que realicé pruebas donde modificaba el valor de los atributos id y name e igualmente me muestra el nombre que introduzco, al hacer console.log(nombre). Es decir, no comprendo que sería .nombre especificamente (con qué se enlaza dentro del HTML). Muchas gracias nuevamente.

Hola, te comenté el código para ver si lo puedes comprender mejor:

var botonAdicionar = document.querySelector("#adicionar-paciente") //Selecciono el botón para adicionar pacientes

botonAdicionar.addEventListener("click", function(event){ //Suscribo la función al evento click
    event.preventDefault(); //Evito que se recargue la página
    var form = document.querySelector("#form-adicionar"); //Selecciono el formulario
    var nombre = form.nombre.value; //Almaceno en la variable 'nombre' el valor de lo que se ingresó en el formulario
})

Respecto a tus dudas:

1.- ¿Cómo es que se imprime en consola lo que introduces?

R: Lo que hace la variable 'botonAdicionar' es llamar al método document.querySelector en cual recibe como argumento la clase correspondiente a lo que estás buscando. ¿Qué pasa si no encuentra con el argumento dado? Retorna el primer elemento encontrado en el documento, o en su defecto null.

2.- Si yo modifico el id y el name dentro del HTML (es decir, ya no se llaman "nombre") igualmente sigue funcionando el código de arriba.

R: Por el mismo motivo explicado anteriormente, en caso de no coincidir el ID retorna el primer elemento encontrado, si no encuentra nada retornará null.

3.- Además tampoco comprendo como funciona el .value ya que en en el HTML no se encuentra el atributo value= dentro de la etiqueta input.

R: .value en JS retornará lo que fue ingresado al campo HTML. Distinto al atributo HTML value= el cual inicializa tu elemento con un valor especificado pero no lo envía como tal.

Si aún tienes más dudas mi Discord es: Benjamín#3369

me puedes enviar el código original y el modificado con el cual dices que obtienes el mismo resultado..?

Gracias a ambos por responder, pero aun no logro comprenderlo :( . Yo me refiero a que si por ejemplo modifico esto en el HTML:

<form id="form-adicionar">
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="nombre">Nombre:</label>
                    <input id="nombreX" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
                </div>

(ahora el primer campo es el peso y el id del campo nombre es "nombreX") y aun dejo esto en el .JS:

var botonAdicionar = document.querySelector("#adicionar-paciente");
botonAdicionar.addEventListener("click",function(event){
    event.preventDefault();
    var form = document.querySelector("#form-adicionar");
    var nombre = form.nombre.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value
    console.log(nombre);
});

sigue mostrando en consola lo que escribo dentro del input "nombre", cosa que no comprendo ya que modifique el id del input nombre, y hasta cambie las posiciones de los inputs. No entiendo como comprende JS al hacer form.nombre.value que debe acceder al campo del nombre. Muchas gracias nuevamente.

Lo normal es que te indique en consola que no está definido.

Puede que suene obvio, pero estás abriendo/recargando el archivo correcto? A veces se pasa por alto por muy obvio que suene.

Sí, estoy abriendo y recargando el archivo correcto, pero entonces (para comprenderlo por más que me funcione aunque no debería hacerlo, lo cual me resulta raro) al hacer form.nombre.value JS se va a enlazar con el input que contenga id = "nombre" verdad? Muchas gracias.

Hola Matias Hernan Fernandez

Tú estás modificando el id, pero no el name, es por ello que cuando no encuentra un id = "nombre" entonces JavaScript utiliza el atributo name y resuelve esa situación, identificando el input al cual haces referencia como el que tiene esa propiedad name.

Debes tener en cuenta que el atributo name no es valido para hacer referencia en CSS. name Se utiliza en la solicitud HTTP que el navegador envía al servidor como un nombre de variable. Este atributo está asociado con los datos dentro del elemento.

Espero que con ello aclares tus dudas. Te dejo un enlace para que puedas leer un poco más sobre ello.

https://www.w3docs.com/snippets/html/what-is-the-difference-between-the-id-and-name-attributes.html

Okay, creo que entiendo, muchas gracias.