El Document Object Model, al que también se conoce como DOM por sus siglas en inglés, es un concepto que nos permite manipular los elementos de un documento HTML directamente desde nuestro código JavaScript. Este concepto se basa en la idea de nodos que se conectan para formar un árbol jerárquico. En este post, te enseñaremos exactamente qué es un nodo en el DOM.
¿Qué es un nodo en el DOM?
En nuestro post sobre el Document Object Model y los siguientes artículos relacionados con el DOM que hemos escrito en nuestro blog de desarrollo web, hemos hablado del concepto de nodo de manera superficial. Sin embargo, por si todavía no queda muy claro a qué nos referimos, a continuación te explicamos qué es un nodo en el contexto del DOM.
Muchos de nuestros estudiantes en KeepCoding nos han dicho que entienden el concepto de nodo en el DOM como una especie de punto de conexión o contacto entre varios elementos del archivo HTML. Este concepto está muy cerca de la realidad, pero podemos concretar un poco más diciendo que un nodo en el DOM es cada una de las etiquetas HTML del árbol jerárquico.
Entonces, si pensamos en el árbol de etiquetas que hemos creado en nuestro post sobre cómo entender el DOM desde el inspector, podemos decir que cada una de las etiquetas main, section, article, div y p son un nodo. Dicho de manera simple, un nodo es una etiqueta HTML sobre la que vamos a poder realizar operaciones de lectura y de escritura.
Para conocer más sobre el concepto de nodo en el DOM, te invitamos a explorar node en el glosario de la página oficial de la Mozilla Developer Network.
¿Cómo funciona un nodo en el DOM?
Teniendo en cuenta que un nodo en el DOM es cualquier etiqueta de HTML que creamos en el árbol jerárquico de nuestro proyecto, podemos utilizar los distintos métodos y propiedades comunes de la clase Element del DOM (de la cual despliegan todas las etiquetas HTML) para acceder o manipular los datos de un nodo.
Te ponemos un ejemplo. Supongamos que queremos acceder a los atributos de uno de nuestros nodos. Entonces, podemos utilizar la propiedad attributes. Como hemos aprendido en nuestro post sobre la clase Element del DOM, la propiedad attributes nos devuelve un objeto con los atributos del nodo al que accedemos.
Pensemos entonces que queremos acceder al nodo de img que hemos determinado en el árbol que estamos usando de ejemplo. Este nodo es hijo de un nodo article, que a su vez se encuentra dentro de un section en el main de un body. Este nodo img tiene una propiedad src (fuente) y una propiedad alt (texto alternativo).
Entonces, lo primero que debemos hacer es recorrer el camino del DOM hasta img. Como hemos aprendido en nuestro post sobre navegar por el árbol del DOM, para ello utilizamos la palabra clave children e insertamos el index del elemento al que queremos acceder.
document.body.children[1].children[0].children[1].children[0]
Con la línea de código anterior hemos accedido al segundo hijo de body (main). Después, al primer hijo de main (section), luego al segundo hijo de section (article). Ahí hemos llegado al padre de img. Entonces, el último paso fue acceder a su único hijo.
Ahora, ya que hemos llegado a un nodo en el DOM, también conocido como etiqueta HTML img, y este nodo extiende de la clase Element, podemos usar la propiedad attributes para acceder a los atributos de img:
document.body.children[1].children[0].children[1].children[0].attributes
Como mencionamos antes, esta propiedad nos devolverá el listado de atributos. Es decir, veremos un mapa que nos dice que tenemos los atributos src y alt. Al desplegar cada uno de estos atributos encontraremos aún más detalles del nodo al que hemos llegado.
Navegar por el árbol del DOM a partir de la propiedad children es un proceso que se complica cuantos más nodos tengamos. Por ello, te recomendamos leer nuestro post sobre seleccionar nodos del DOM para aprender cómo facilitar este proceso.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es un nodo en el DOM, ¡puedes utilizar sus distintas representaciones en tus propios proyectos! Para seguir aprendiendo sobre las posibilidades que tiene el DOM en el desarrollo frontend, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación íntegra e intensiva aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡Pide información y descubre cómo impulsar tu carrera!
