Una vez que está construido el DOM ya podemos comenzar a acceder a cualquier nodo del arbol y manipularlo de forma sencilla, crear nuevos elementos, eliminarlos…

Accediendo al nodo por Id

La forma más sencilla de acceder  un nodo es por el id, `si se localiza el elemento, este es devuelto como un objeto y si no se localiza se queda como null.

Para ver como se accede a un nodo por medio de la Id vamos a verlo en un pequeño ejemplo:

See the Pen getElementById by Miguel A. López Torralba (@mialto) on CodePen.

Si analizamos El código vemos varias cosas interesantes, la primera es que vemos como se toma el valor de un nodo por medio de la id y lo guardamos en una variable llamada elemento.

A continuación se accede a otro nodo y se le añade .innerHTML que lo que hace es modificar el contenido del nodo por el que le introducimos a continuación, en nuestro caso una frase y el contenido del nodo guardado en elemento.

Este método es unos de los más utilizados al desarrollar aplicaciones webs dinámicas, es la función preferida para acceder directamente a un nodo y poder leer o modificar sus propiedades.

Hay que tener en cuenta que la id al ser única para el nodo, nos hace tomar exactamente el nodo que deseamos.

Accediendo al nodo por la etiqueta

Para acceder al nodo según su etiqueta debemos utilizar la función getElementsByTagName() de este modo podemos obtener todos los elementos del DOM que tienen esa etiqueta, por ejemplo <p>.

Un ejemplo muy común es obtener todos los parrafos de un arbol de nodos

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

Aquí vemos como la función recibe como parámetro el nombre de la etiqueta que requerimos y nos devuelve un array con todos los párrafos del DOM.

Ahora sería muy sencillo acceder a uno de esos parrafos por ejemplo:

var primerParrafo = parrafos[0]

Nos daría el primer párrafo.

Igualmente podríamos recorrer todos los elementos del array con un bucle como en el siguiente ejemplo:

for (var i=0; i<parrafos.lenght; i++){
    var parrafo = parrafos[i];
}

Además la función getElementsByTagName() se puede utilizar de forma recursiva sobre los nodos, como por ejemplo en el siguiente ejemplo para obtener todos los párrafos del primer div de la página:

var divs = document.getElementsByTagName("div");
var primerDiv = divs[0];
var parrafosPrimeraCaja = primerDiv.getElementsByTagName("p");

Accediendo a los nodos por nombre

Utilizando la función getElementsByName() podemos buscar los elementos cuyo atributo name sea igual al parámetro enviado.

Por ejemplo imaginemos que tenemos un DOM donde tenemos párrafos con el atributo name, por ejemplo

<p name=»importante»>…</p>

Podemos recoger el valor de este párrafo con la siguiente línea:

var parrafoImportante = document.getElementsByName("importante");

Por norma general el elemento name debe de ser único para el elemento HTML al que defino, aunque hay que tener cuidado, y yo recomiendo usar ids mejor que names, aunque habrá ocasiones en las que sea práctico usarlo.

Accediendo a los nodos por el nombre de clase

Es posible también acceder a todos los nodos que tienen un mismo nombre de clase utilizando la función getElementsByClassName()

De esta manera solo deberíamos hacer algo parecido a esto para obtener los nodos que tienen nuestra clase:

var principal = document.getElementsByClassName("principal");

Accediendo a los nodos por el selector CSS

Otra forma de acceder a los nodos es por medio de los selectores CSS, por ejemplo imaginemos que tenemos una serie de párrafos con la clase encabezado <p class=»encabezado»>…</p>, podemos acceder a ellos no solo por medio del nombre de clase también por el selecto CSS; querySelectorAll(«p.encabezado») de la siguiente forma:

var encabezados = document.querySelectorAll("p.encabezado")

Otras formas de acceder a los nodos