Manipulación Dinámica de Documentos Web con JavaScript: DOM y Validación de Formularios

Introducción al Modelo de Objetos del Documento (DOM) y Manipulación Web

1. Definición y Estructura del DOM

El DOM (Document Object Model) es la representación estructurada del documento HTML vista como un objeto. Es creado automáticamente por el navegador al cargar la página.

Permite acceder a la estructura, estilo y contenido de la web para modificarlos dinámicamente.

Representación Jerárquica del DOM

El DOM organiza el documento como un árbol de nodos:

• Documento
  • [ html ]
    • [ head ]
    • [ body ]
      • [ div ]
      • [ p ]

Las etiquetas son nodos de tipo Elemento y el contenido textual dentro de ellas es un nodo de tipo Texto (son nodos hijos distintos).

3. Estructura Semántica y Manejadores de Eventos

Esta estructura promueve la separación del código HTML (contenido) del JavaScript (comportamiento), evitando "ensuciar" el HTML con atributos en línea como onclick="...".

Asignación Semántica de Eventos

La fórmula para asignar un manejador de eventos de forma semántica es:

elementoDOM.evento = función;

Se recomienda seleccionar el elemento por su id y asignar la función SIN paréntesis (si se incluyen paréntesis, la función se ejecuta inmediatamente y no cuando ocurre el evento).

Ejemplo de Asignación Semántica

// HTML: <input type="button" id="miBoton" value="Validar"> function saludar() { alert("Hola"); }

// Asignación semántica: var boton = document.getElementById("miBoton"); boton.onclick = saludar; // ¡OJO! saludar sin ()

4. Contextualización de la Validación en Formularios

Validar en un formulario implica comprobar con JavaScript, antes de enviar los datos al servidor, que la información introducida por el usuario es correcta.

El Proceso de Validación Cliente

1. Si hay un error (ej. campo vacío), se captura el evento.
2. Se detiene el envío del formulario.
3. Se muestra un mensaje de error en un elemento <p> situado debajo del <input>, modificando sus propiedades (estilo, contenido).

Diferencia entre Validación Cliente (JS) y Servidor (PHP)

• JS (Validación Cliente): Es inmediata. No recarga la página. Mejora la experiencia del usuario avisando al instante.
• PHP (Validación Servidor): Ocurre después de enviar. Si hay error, la página se recarga y el servidor devuelve el fallo. Es obligatoria por seguridad.

Ejemplo de Detección de Campo Vacío

// Si el valor está vacío, mostramos error en el párrafo: var input = document.getElementById("nombre"); var errorP = document.getElementById("error-msg"); if (input.value === "") {     errorP.textContent = "El nombre es obligatorio"; // Muestra el error     errorP.style.color = "red"; }

5. Propiedades y Atributos del DOM

Son las características de los elementos que podemos leer o cambiar como si fueran propiedades de un objeto.

Tipos Principales de Propiedades

• Contenido:
  • .innerHTML: Devuelve o cambia el contenido incluyendo etiquetas HTML.
  • .textContent: Devuelve o cambia solo el texto plano (ignora etiquetas).
• Formularios:
  • .value: Valor escrito en inputs, selects, etc.
  • .checked: Estado (true/false) de checkboxes o radios.
  • .disabled: Habilita o deshabilita un campo.
• Atributos Visuales/HTML:
  • .src: Ruta de una imagen.
  • .className: Clase CSS del elemento.
  • .style: Para cambiar CSS directo (ej: .style.color = 'red').

6. Creación y Eliminación Permanente de Elementos

Para que un cambio sea permanente en la sesión actual, es necesario modificar la estructura del árbol del DOM, no solo ocultar el elemento.

A) Crear un Elemento (4 Pasos)

1. Crear nodo Elemento: document.createElement("etiqueta").
2. Crear nodo Texto: document.createTextNode("Contenido").
3. Unir Texto al Elemento: elemento.appendChild(texto).
4. Insertar en la página: padre.appendChild(elemento).

Ejemplo de Creación

var nuevoP = document.createElement("p"); // 1 var texto = document.createTextNode("Hola"); // 2 nuevoP.appendChild(texto); // 3 document.body.appendChild(nuevoP); // 4

B) Eliminar un Elemento

Se necesita el padre del elemento para eliminar al hijo usando removeChild.

Fórmula: hijo.parentNode.removeChild(hijo);.

Ejemplo de Eliminación

var parrafo = document.getElementById("borrarme"); parrafo.parentNode.removeChild(parrafo);

Técnicas Comunes de Validación de Formularios con JavaScript

1. Validar Campo de Texto Obligatorio

Comprueba que el campo no sea nulo, que tenga longitud y que no sean solo espacios en blanco.

var valor = document.getElementById("campo").value;

// Comprueba nulo, longitud 0 o si solo contiene espacios: if(valor == null || valor.length == 0 || /^\s+$/.test(valor)) {     return false; // El campo no es válido}

2. Validar Campo Numérico

Asegura que el valor introducido sea un número válido.

var valor = document.getElementById("campo").value;

// Si no es un número (isNaN), devuelve false: if(isNaN(valor)) {     return false;}

3. Validar Número de Teléfono

Comprueba que sean exactamente 9 dígitos consecutivos (sin espacios ni guiones).

var valor = document.getElementById("campo").value;

// Expresión regular para 9 dígitos exactos: if( !(/^\d{9}$/.test(valor)) ) {     return false;}

6. Validar Lista Desplegable (<select>)

Obliga a que el usuario seleccione una opción diferente a la de por defecto (cuyo valor suele ser 0 o vacío).

var indice = document.getElementById("opciones").selectedIndex;

// Si no hay selección o es la opción por defecto (índice 0): if(indice == null || indice == 0) {     return false;}

7. Validar una Fecha

Asumiendo que tienes los valores de año, mes y día por separado.

var ano = document.getElementById("ano").value; // Recuerda: En JavaScript los meses van de 0 (Enero) a 11 (Diciembre) var mes = document.getElementById("mes").value; var dia = document.getElementById("dia").value;

var valor = new Date(ano, mes, dia);

// Si la fecha no es válida: if(isNaN(valor)) {  return false;}

8. Validar Checkbox (Casilla de verificación)

Opción A: Un solo checkbox obligatorio (ej. "Acepto condiciones")

var elemento = document.getElementById("campo");

// Si no está marcado (.checked es false): if( !elemento.checked ) {     return false;}

Opción B: Verificar todos los checkboxes de un formulario

var formulario = document.getElementById("formulario"); for(var i=0; i < formulario.elements.length; i++) {     var elemento = formulario.elements[i];     if(elemento.type == "checkbox") {         if(!elemento.checked) {             return false; // Si encuentra uno sin marcar, falla }    }}

9. Validar Radio Buttons (Opciones excluyentes)

Comprueba que al menos una opción del grupo haya sido seleccionada.

var opciones = document.getElementsByName("opciones"); // Se busca por 'name', no por 'id'
var seleccionado = false;

// Recorrer todos los radios del grupo for(var i=0; i < opciones.length; i++) {     if(opciones[i].checked) {         seleccionado = true;
        break; // Si encontramos uno marcado, paramos de buscar  }}

// Si al terminar el bucle ninguno estaba marcado if(!seleccionado) {     return false;}