DOM

El Document Object Model - DOM

• Obtener elementos
• getElementById()
• getElementsByTagName()
• getElementsByName()
• Crear elementos
• Borrar elementos

1. Obtener elementos

1.1 getElementById()

Devuelve el elemento HTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el elemento deseado. Es usada tanto para leer como para modificar sus propiedades.

DOM proporciona dos métodos alternativos para acceder a un elemento HTML específico: acceso a través de sus nodos padre y acceso directo.

<p class=abc id=a1>Parrafo</p>

var enlace = document.getElementById("a1"):
alert(enlace.href); //http://www...
alert(enlace.style.font-Weight); //Bold
alert(enlace.className); //abc

1.2 getElementsByName()

Esta función obtiene todos los elementos cuyo atributo name sea igual al parámetro proporcionado.

<Button name=igv>IGV</Button>

var cap = document.getElementByName("igv");

Normalmente el atributo name es único para los elementos HTML que lo definen, por lo que es un método muy práctico para acceder directamente al elemento deseado. En el caso de los elementos HTML radio button, el atributo name es común a todos los radio button que están relacionados, por lo que la función devuelve una colección de elementos.

1.3 getElementsByTagName()

Esta función obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. El valor que devuelto es una matriz DOM es una matriz de objetos (no se cadena de texto) con todos los elementos que cumplen la condición de que su etiqueta coincide con el parámetro proporcionado.

var obj = document.getElementByTagName("p");

for (var i=0; i<obj.length; i++){
   alert(obj[i]);
}

2. Crear elementos

Para crear un elemento HTML sencillo, hay que genera dos nodos: el de tipo Element y representa la etiqueta y el de tipo Text y representa el contenido textual de la etiqueta.

var parrafo = document.createElement("p");
var contenido = document.createTextNode("Hola Mundo");
parrafo.appendChild(contenido);
document.body.appendChild(parrafo);

• createElement(etiqueta): crea un nodo de tipo Element que representa al elemento HTML cuya etiqueta se pasa como parámetro.
• createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido textual de los elementos HTML.
• nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo. Se debe usar al menos dos veces con los nodos habituales: en primer lugar se añade el nodo Text como hijo del nodo Element y a continuación se añade el nodo Element como hijo de algún nodo de la página.

3. Eliminar elementos

Eliminar un nodo del árbol DOM de la página es mucho más sencillo que añadirlo. La función removeChild() requiere como parámetro el nodo que se va a eliminar. Además, esta función debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar.

<p id="provisional">...</p>

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

Una forma muy segura y rápida de acceder al nodo padre de un elemento es mediante la propiedad nodoHijo.parentNode.