Computación en el Cliente Web

4.3. Tipos de elementos en DOM

Hay 12 tipos de nodos en el árbol DOM. Sin embargo, hay cuatro tipos que son los que se
utilizan habitualmente:

Element: todas las etiquetas se representan con este elemento.

Attr: para los atributos de etiqueta, tipo id o href .
Text: para los contenidos de tipo texto.
Document: es el nodo raíz de toda la página. Todos los demás nodos descienden de
este nodo raíz.

Todos los nodos del árbol DOM implementan la interfaz Node. Es fácil de recordar, ya
que todas las interfaces tienen nombres muy descriptivos:

Los nodos de tipo Element implementan la interfaz Element ;

Los nodos de tipo Text implementan Text y CharacterData ;
Los nodos Document lo hacen con la interfaz Document;
Los nodos Attr, la interfaz Attr .

En el siguiente apartado aprenderemos a recorrer y modificar el árbol DOM.

Este apartado ha sido elaborado a partir del siguiente libro:

McNavege, T. (2011). JavaScript, edición 2012 (páginas 209 y 210). Madrid: Anaya
Multimedia.

Si bien no es obligatoria su lectura, sí recomendamos la misma, ya que incluye

información adicional.
4.4. Acceso a los elementos del árbol DOM

Comenzaremos recorriendo el árbol DOM para lo que necesitamos poder ir de unos

nodos a otros. Para ello, utilizaremos los miembros de la interfaz Node:

Node.childNode
Node.firstChild
Node.lastChild
Node.nextSibling
Node.previousSibling
Node.parentNode

Tal como podrás estudiar en el manual que te indicamos, para descender por el árbol,
utilizaremos childNodes , que contiene una nodeList similar a un vector, con todos los
hijos de un nodo.

Para recorrer el árbol en sentido contrario, utilizaremos parentNode , que nos devolverá
el nodo padre del nodo al que estamos consultando.

Aunque esta forma de recorrer el árbol es sencilla, verá cómo es posible que se presenten
algunas complicaciones, las cuales se abordan en el manual que le indicamos:

Los espacios en blanco en el fichero HTML.

La sucesión de . y [] para acceder a elementos del DOM.

Para movernos de forma lateral por el árbol, utilizaremos nextSibling y

previousSibling . Estos miembros se basan en que nodos hermanos tienen el mismo
nodo padre. De esta forma, son capaces de desplazarse de forma lateral. Además, se
puede acceder al primer y último nodo hijo por medio de fistChild y lastChild ,
respectivamente. Puede ver ejemplos de uso en el manual de referencia.

Para trabajar de una forma más eficiente, es conveniente pasar los nodos a un vector,
evitando así tener que hacer repetidas consultas al DOM que, como podrá suponer, es
más lento.

Hasta ahora, hemos visto cómo recorrer el árbol. Sin embargo, muchas veces
necesitaremos acceder a un nodo particular. Para hacerlo, disponemos del método
 Computación en el Cliente Web

Document.getElementById() , que recibe el id del elemento que queremos acceder.

También podemos acceder por medio del nombre de las etiquetas, utilizando
Document.getElementsByTagName() o Element.getElementsByTagName() . En ambos
casos, se devuelve una lista de todos los elementos con ese nombre, bien de todo el
documento (en el primer caso) o bien de los descendientes de un nodo particular (en el
segundo caso).

A continuación, aprenderemos a consultar los atributos. Los atributos habituales

son: id , className , title , lang y dir . Sus valores que, normalmente, serán cadenas de
caracteres, se pueden acceder tanto por medio de [] como del operador “.”. No obstante,
JavaScript incluye un conjunto de métodos que también permiten consultar los atributos
de los elementos del árbol DOM. En particular, utilizaremos getAttribute() .

Una de las formas de añadir contenido dinámico en nuestra web, será incluyendo nuevo
contenido. Para hacerlo, podemos crear nuevos nodos Element o Text. La creación de
nodos del árbol DOM se realiza por medio del método Document.createElement() . Para
crear nodos de texto, utilizaremos Document.createTextNode() . Una vez creados
nuestros nuevos nodos, tendremos que insertarlos en el árbol. Para hacerlo, disponemos
de tres métodos:

Node.appendChild() : Añade el nodo al final de la lista de hijos.

Node.insertBefore() : Añade el nodo antes del nodo que se indique.
Node.replaceChild() : Intercambia el nuevo nodo por el que se indique.

Para eliminar nodos, solo necesitamos un método: Node.removeChild() .