JavaScript y el DOM: Cómo Manipular HTML y Gestionar Eventos

DOM (Document Object Model)

Selección de Elementos

Función getElementsByTagName(nombreEtiqueta)

Obtiene una colección de todos los elementos de la página cuya etiqueta coincide con el parámetro proporcionado.

El siguiente ejemplo muestra cómo obtener todos los párrafos de una página:

var parrafos = document.getElementsByTagName("p");

La función getElementsByTagName() se puede aplicar de forma recursiva sobre cada uno de los nodos. En el siguiente ejemplo, se obtienen todos los enlaces del primer párrafo de la página:

var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");

Función getElementsByName()

Es similar a la anterior, pero en este caso se buscan los elementos cuyo atributo name sea igual al parámetro proporcionado. Devuelve una colección de nodos.

En el siguiente ejemplo, se obtiene una colección de elementos con el nombre indicado:

var parrafoEspecial = document.getElementsByName("especial");

Función getElementById()

Es la más utilizada en el desarrollo de aplicaciones web dinámicas. Se trata de la función preferida para acceder directamente a un único nodo y poder leer o modificar sus propiedades, ya que el id debe ser único en el documento.

var cabecera = document.getElementById("cabecera");

Creación y Manipulación de Nodos

Crear y Añadir Nodos

Crear y añadir un nuevo elemento XHTML a la página consta de cuatro pasos:

1. Crear un nodo de tipo Element (ej: <p>, <div>).
2. Crear un nodo de tipo Text con el contenido.
3. Añadir el nodo de texto como hijo del nodo de elemento.
4. Añadir el nodo de elemento a la página (ej: como hijo del body).

// 1. Crear nodo de tipo Element
var parrafo = document.createElement("p");

// 2. Crear nodo de tipo Text
var contenido = document.createTextNode("¡Hola Mundo!");

// 3. Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// 4. Añadir el nodo Element como hijo de la página
document.body.appendChild(parrafo);

La función NodoPadre.appendChild(nodoHijo) añade un nodo como el último hijo de otro nodo.

Eliminación de Nodos

Para eliminar un nodo, primero se debe obtener una referencia a él y luego usar el método removeChild() de su nodo padre. La forma más segura y rápida de acceder al nodo padre es mediante la propiedad parentNode.

// Se obtiene el elemento que se quiere eliminar
var parrafo = document.getElementById("provisional");

// Se elimina utilizando el método del padre
parrafo.parentNode.removeChild(parrafo);

Acceso a Atributos y Estilos CSS

Acceso directo a los atributos XHTML

Se puede acceder a los atributos estándar de un elemento HTML como si fueran propiedades del objeto.

var enlace = document.getElementById("enlace");
alert(enlace.href); // Muestra http://www.ejemplo.com

Acceso a Propiedades CSS

Las propiedades CSS no son tan fáciles de obtener como los atributos XHTML. Para obtener o modificar el valor de cualquier propiedad CSS de un nodo, se debe utilizar el atributo style. Las propiedades CSS con guiones (ej: font-weight) se transforman a camelCase (ej: fontWeight).

Ejemplo 1: Obtener el margen de una imagen.

var imagen = document.getElementById("imagen");
alert(imagen.style.margin);

Ejemplo 2: Obtener el grosor de la fuente.

var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // Muestra "bold"

El Atributo 'class'

El único atributo XHTML que no tiene el mismo nombre en las propiedades DOM es el atributo class. Como la palabra class está reservada por JavaScript, no es posible utilizarla. En su lugar, DOM utiliza la propiedad className para acceder al atributo class de XHTML.

var parrafo = document.getElementById("parrafo");
alert(parrafo.class);     // Muestra "undefined"
alert(parrafo.className); // Muestra "normal"

Eventos en JavaScript

Los eventos son acciones que ocurren en la página web (como un clic del ratón o la pulsación de una tecla) a las que JavaScript puede responder.

Tipos de Eventos Comunes

Manejadores de Eventos

Manejadores en Atributos HTML

Se puede asignar código JavaScript directamente en los atributos HTML del evento.

Ejemplo 1: Mostrar un mensaje al hacer clic en un botón.

<input type="button" value="Púlsame" onclick="alert('Gracias por pinchar');" />

Ejemplo 2: Múltiples eventos en un mismo elemento.

<p onclick="alert('Has pinchado');" onmouseover="alert('Has pasado el ratón por encima');">
  Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima.
</p>

La Variable this

Dentro de un manejador de eventos, la variable this hace referencia al propio elemento HTML que ha provocado el evento. Esto permite simplificar el código.

<!-- Forma larga -->
<div id="contenidos" 
     onmouseover="document.getElementById('contenidos').style.borderColor='black';" 
     onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
  Sección de contenidos...
</div>

<!-- Usando 'this' -->
<div id="contenidos" 
     onmouseover="this.style.borderColor='black';" 
     onmouseout="this.style.borderColor='silver';">
  Sección de contenidos...
</div>

Uso de Funciones Externas

Para un código más limpio y reutilizable, es recomendable definir los manejadores de eventos como funciones externas y llamarlas desde el HTML, pasando this como parámetro si es necesario.

<script>
function resalta(elemento) {
  if (elemento.style.borderColor == 'silver') {
    elemento.style.borderColor = 'black';
  } else {
    elemento.style.borderColor = 'silver';
  }
}
</script>

<div onmouseover="resalta(this)" onmouseout="resalta(this)">
  Sección de contenidos...
</div>

Manejadores Semánticos

Consiste en asignar una función a la propiedad de evento de un elemento directamente desde JavaScript, en lugar de hacerlo en el HTML. Es una práctica más moderna y recomendada.

// 1. Función externa
function muestraMensaje() {
  alert('Gracias por pinchar');
}

// 2. Se obtiene el elemento
var miBoton = document.getElementById("pinchable");

// 3. Se asigna la función al evento
miBoton.onclick = muestraMensaje;

Esto es especialmente útil para añadir eventos a múltiples elementos de forma dinámica, por ejemplo, al cargar la página:

window.onload = function() {
  var formulario = document.getElementById("formulario");
  var camposInput = formulario.getElementsByTagName("input");
  for(var i=0; i < camposInput.length; i++) {
    if(camposInput[i].type == "text") {
      camposInput[i].onfocus = resalta; // 'resalta' es otra función definida
    }
  }
};

El Objeto Event

Cuando se dispara un evento, el navegador crea un objeto Event que contiene información sobre dicho evento (ej: qué tecla se pulsó, la posición del ratón, etc.).

Eventos de Teclado

Script que muestra información sobre los eventos de teclado:

window.onload = function() {
  document.onkeyup = muestraInformacion;
  document.onkeypress = muestraInformacion;
  document.onkeydown = muestraInformacion;
}

function muestraInformacion(elEvento) {
  var evento = window.event || elEvento;
  var info = document.getElementById('info'); // Asumiendo que existe un div con id='info'
  var mensaje = "Tipo de evento: " + evento.type + "<br>" +
                "Propiedad keyCode: " + evento.keyCode + "<br>" +
                "Propiedad charCode: " + evento.charCode + "<br>" +
                "Carácter pulsado: " + String.fromCharCode(evento.charCode);
  info.innerHTML += "<br>----------------------<br>" + mensaje;
}

Eventos de Ratón

Obtener la posición del ratón respecto de la ventana del navegador:

function muestraPosicion(elEvento) {
  var evento = elEvento || window.event;
  var coordenadaX = evento.clientX;
  var coordenadaY = evento.clientY;
  alert("Has pulsado el ratón en la posición: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraPosicion;

Ejercicios Prácticos Propuestos

• Factorial de un número
• Suma de dos números
• Calendario dinámico
• Cálculo de la letra del DNI
• Comprobador de palíndromos
• Determinar si un número es par o impar
• Gestión de ventanas emergentes (Popups)
• Análisis de texto (contar palabras, vocales, etc.)
• Validación de formularios
• Calculadora simple

Ejemplos de Funciones

Contar elementos por nombre y verificar ID

function contarNombre() {
    var aux = document.getElementsByName("nombre");
    var contador = aux.length;
    alert("Hay " + contador + " elementos con ese nombre.");
}

function estaID() {
    var aux = document.getElementById("identificador");
    if (aux != null) {
        alert("¡El elemento con ese ID existe!");
    } else {
        alert("¡El elemento con ese ID no existe!");
    }
}

Crear, eliminar y modificar elementos (DIV)

function crearDiv() {
    // Creamos un elemento div
    var elemento = document.createElement("div");
    // Creamos el texto que queremos incluir
    var texto = document.createTextNode("¡Hola mundo!");
    // Incluimos el texto en el div
    elemento.appendChild(texto);
    // Añadimos el elemento al body del HTML
    document.body.appendChild(elemento);
}

function eliminarDiv() {
    var eliminable = document.getElementById("eliminable");
    if (eliminable) {
        eliminable.parentNode.removeChild(eliminable);
    }
}

function pintarDiv() {
    // Pinta el primer div que encuentre
    var divs = document.getElementsByTagName("div");
    if (divs.length > 0) {
        divs[0].style.backgroundColor = "red";
    }
}