1.3.- Acceso a los nodos.

Cuando ya se ha construido automáticamente el árbol de nodos del DOM, ya podemos comenzar a utilizar sus funciones para acceder a cualquier nodo del árbol. El acceder a un nodo del árbol, es lo equivalente a acceder a un fragmento de la página de nuestro documento. Así que, una vez que hemos accedido a esa parte del documento, ya podemos modificar valores, crear y añadir nuevos elementos, moverlos de sitio, etc.

Para acceder a un nodo específico lo podemos hacer empleando dos métodos: o bien a través de los nodos padre, o bien usando un método de acceso directo. A través de los nodos padre partiremos del nodo raíz e iremos accediendo a los nodos hijo, y así sucesivamente hasta llegar al elemento que deseemos. Y para el método de acceso directo, que por cierto es el método más utilizado, emplearemos funciones del DOM, que nos permiten ir directamente a un elemento sin tener que atravesar nodo a nodo.

Algo muy importante que tenemos que destacar es, que para que podamos acceder a todos los nodos de un árbol, el árbol tiene que estar completamente construido, es decir, cuando la página haya sido cargada por completo, en ese momento es cuando podremos acceder a cualquier elemento de dicha página.

Consideremos el siguiente ejemplo y veamos las formas de acceso:

<input type="text" id="apellidos" name="apellidos" />

getElementsByName()

Esta función obtiene una colección, que contiene todos los elementos de la página cuyo atributo name coincida con el indicado como parámetro.

let elementos = document.getElementsByName("apellidos");

Si sólo tenemos un elemento con name="apellidos" para acceder a él haremos:

let elemento = document.getElementsByName("apellidos")[0];

Por ejemplo, si tuviéramos 3 elementos con el atributo name="apellidos" para acceder al segundo elemento haríamos:

 let segundo = document.getElementsByName("apellidos")[1]; // recordarte que los arrays comienzan en la posición 0.

getElementsByTagName()

Esta función es muy similar a la anterior y también devuelve una colección de elementos cuya etiqueta coincida con la que se pasa como parámetro. Por ejemplo:

let elementos = document.getElementsByTagName("input");
let cuarto = document.getElementsByTagName("input")[3];

getElementById()

Esta función es la más utilizada, ya que nos permite acceder directamente al elemento por el ID. Entre paréntesis escribiremos la cadena de texto con el ID. Es muy importante que el ID sea único para cada elemento de una misma página. La función nos devolverá únicamente el nodo buscado. Por ejemplo:

let elemento= document.getElementById("apellidos");

Si tenemos por ejemplo una tabla con id="datos" y queremos acceder a todas las celdas de esa tabla, tendríamos que combinar getElementById con getElementsByTagName. Por ejemplo:

let miTabla= document.getElementById("datos");
let filas= miTabla.getElementsByTagName("td");