El DOM (Document Object Model) es un API destinado a trabajar con documentos HTML y XML. El DOM proporciona una representación en forma de árbol de un documento y permite su manipulación (añadir un elemento nuevo, borrar un elemento, mover un elemento de sitio). Algunas funciones útiles del DOM:
- document.getElementById(id): devuelve el elemento con el identificador indicado.
- document.createElement(etiqueta): crea un nuevo elemento según la etiqueta indicada.
- elementoPadre.appendChild(elementoNuevo): añade elementoNuevo a elementoPadre al final de su lista de elementos hijo.
- elementoPadre.removeChild(elementoHijo): Elimina el nodo elementoHijo de elementoPadre. Devuelve el nodo eliminado como Node object, o null si el nodo no existe.
- elementoPadre.insertBefore(elementoNuevo, elementoReferencia): añade elementoNuevo en la lista de elementos hijo de elementoPadre antes de elementoReferencia.
El siguiente ejemplo muestra cómo se pueden añadir filas en una tabla de una página web con el texto que introduzca el usuario. También se muestra como eliminar filas:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Utilización de DOM en JavaScript</title>
<script type="text/javascript">
function insertaFila() {
// Obtiene la tabla que tiene id="miTabla"
var tabla = document.getElementById("miTabla");
// Crea un nuevo elemento de tipo fila
var fila = document.createElement("tr");
// Crea un nuevo elemento de tipo celda
var celda = document.createElement("td");
//Inserta el texto en el contenido de la celda
celda.textContent = document.getElementById("texto").value;
// Añade la celda a la fila
fila.appendChild(celda);
// Añade la fila al final de los elementos que contenga la tabla
tabla.appendChild(fila);
}
function borraFila() {
// Obtiene la tabla que tiene id="miTabla"
var tabla = document.getElementById("miTabla");
//Obtiene la primera fila de la tabla
fila = tabla.firstChild;
//Elimina la fila
if(fila != null)
tabla.removeChild(fila);
}
</script>
</head>
<body>
<p>
Texto: <input type="text" id="texto" />
<input type="button" value="Añadir fila" onClick="insertaFila()"/>
<input type="button" value="Borrar fila" onClick="borraFila()"/>
</p>
<table id="miTabla" border="1"></table>
</body>
</html>
Este ejemplo se ha realizado utilizando las propiedades y métodos del "DOM Node Object" para manejar un objeto de tipo tabla. Sin embargo, se podría/debería realizar utilizando el "HTML DOM Table Object", que contiene propiedades y métodos específicos para manipular el objeto tabla.
No hay comentarios:
Publicar un comentario