DOM

El Document Object Model - DOM

1. Obtener elementos

1.1 getElementsByTagName()

Devuelve una colección HTML que contiene todos los elementos con una etiqueta especificado.

document.getElementsByTagName('etiqueta');

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

<button onClick="alert('Existen: ' + document.getElementsByTagName('p').length + ' etiquetas p.');">Ejemplo</button>

1.2 getElementsByName()

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

document.getElementByName('valor');

<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 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.

getElementById('valor');

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.4 getElementsByClassName()

getElementsByClassName('valor');

2. Crear elementos

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

document.createElement(elemento);
document.appendChild(elemento);

Crea un nueva parrafo y le añade texto.

var parrafo = document.createElement('p');                   //Crea un parrafo
var contenido = document.createTextNode('Hola Mundo');       //Crea un texto
parrafo.appendChild(contenido);(t);                          //Añade el texto al parrafo
document.body.appendChild(parrafo);

3. Reemplazar elementos

document.replaceChild(new, old);

4. 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.

document.removeChild(elemento);

<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.

5. Escribir en elementos

Para acceder a un elemento HTML, JavaScript puede usar alguno de los metodos document.getElement***('valor'). Luego con la propiedad innerHTML se define el contenido HTML.

document.getElement***('valor').innerHTML = 'contenido';