Uno de los entornos fundamentales del desarrollo web es nuestro documento HTML. Por ello, se ha creado el concepto de Document Object Model o DOM, fundamental para acceder y modificar los distintos elementos que componen estos documentos. En este post, te enseñaremos qué es y cómo funciona la clase Element del DOM.
¿Qué es la clase Element del DOM?
Como te hemos explicado en nuestro post sobre el Document Object Model, todas las etiquetas de este árbol jerárquico son instancias de la clase Element. Es decir, los nodos que cuelgan de los comandos document.body o document.head, fundamentales para navegar por el árbol del DOM, son instancias de Element.
Si todavía tienes dudas sobre el concepto de nodo frente al de etiqueta HTML, te invitamos a leer nuestro post sobre qué es un nodo en el DOM.
Puede que a lo largo de tu formación encuentres a la clase Element del DOM nombrada como HTMLElement. Ten presente que estas dos nomenclaturas se refieren a lo mismo.
Entonces, ¿de qué sirve que los nodos sean instancias de esta clase? Pues esto es fundamental para tener atributos y métodos globales que funcionen sin importar el nodo. Es decir, la clase Element del DOM nos proporciona atributos y métodos comunes para manipular estos nodos o etiquetas HTML.
¿Cómo funciona la clase Element del DOM?
La clase Element del DOM funciona a partir de una serie de palabras clave que, como hemos visto, son atributos y métodos que nos permiten manipular los distintos nodos del Document Object Model.
A continuación, te presentamos cómo funcionan algunas de las palabras clave que son propiedades de la clase Element del DOM:
- attributes: esta palabra clave nos permite acceder al array de atributos que tiene ese nodo.
- innerHTML: esta palabra clave nos va a permitir cambiar el contenido de un nodo o etiqueta por código HTML para que este se renderice.
- textContent: esta propiedad nos va a permitir consultar o sobrescribir el texto incluido dentro de un nodo. Si quieres conocer uno de sus usos, te invitamos a leer nuestro post sobre navegar por el árbol del DOM.
- classList: al usar la propiedad classList, obtendremos como respuesta un array con las clases de CSS que tiene el nodo.
Como te mencionamos antes, la clase Element también nos proporciona una serie de métodos para manipular los nodos. A continuación, te explicamos cómo funcionan:
- appendChild(<Element>): este método nos permite añadir un elemento como hijo a un nodo.
- removeChild(<Element>): este método nos permite eliminar un elemento hijo de un nodo en el DOM.
- remove(): este método nos permite eliminar un nodo completo del DOM. A continuación, un ejemplo:
document.body.children[0].remove().
- replaceWith(<Element>): este método nos permite reemplazar el elemento actual por el que se pasa como parámetro, es decir, por el elemento que incluyamos dentro de los paréntesis luego de replaceWith.
En resumen, todas las propiedades y métodos que hemos visto son proporcionadas por la clase Element del DOM, de la cual se extienden todas las etiquetas HTML de este árbol, precisamente para interactuar con estos nodos. Gracias a estas, podemos manipular el DOM desde JavaScript para que la web pinte los datos que nosotros necesitamos, vengan de donde vengan.
Si quieres conocer más sobre este tema, te invitamos a leer el artículo sobre element en la página oficial de la Mozilla Developer Network. Allí encontrarás un listado completo de las propiedades y métodos para modificar el DOM. Ten presente que algunos de ellos, los que están en rojo, están deprecados. Para verificar esta información puedes explorar la página CanIUse.
Ahora que conoces las propiedades y métodos disponibles para interactuar con los nodos del DOM, puedes aprender a utilizarlos en nuestros posts sobre seleccionar nodos del DOM y crear elementos en el DOM en nuestro blog sobre desarrollo web.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona la clase Element del DOM, ¡ha llegado el momento de que uses este conocimiento en tus propios proyectos! Si quieres seguir aprendiendo a desarrollar todo tipo de proyectos para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra donde aprenderás a desarrollar con diversas herramientas y lenguajes de programación, como JavaScript (tanto desde el servidor como desde el frontend), HTML y CSS. ¡Anímate a seguir aprendiendo con nosotros e inscríbete ahora para impulsar tu carrera!
