El Document Object Model, también conocido como DOM por sus siglas en inglés, es un concepto muy importante del desarrollo web, pues nos permite acceder al árbol de jerarquías del archivo HTML que se pinta en el navegador. Sin embargo, este árbol no es tan fácil de entender cuando tenemos códigos amplios. Por ello, en este post, te enseñaremos cómo entender el DOM desde el inspector de tu navegador.
¿Qué es el DOM?
Como te hemos explicado en nuestro post sobre el Document Object Model, el DOM es un árbol jerárquico de etiquetas HTML creado por el navegador y accesible desde JavaScript mediante document. Es decir, mediante document podemos acceder a los distintos nodos o etiquetas HTML que conforman el árbol de nuestro proyecto. El DOM es, además, todo lo que el usuario final ve en la web, pues ese árbol es posteriormente interpretado y pintado por el navegador en pantalla.
A continuación, te enseñaremos cómo entender el DOM desde el inspector web de nuestro navegador. Para ello, debemos estar en la misma página sobre el árbol concreto en el que estamos explorando. Las siguientes líneas de código serán con lo que entendamos el DOM:
<!DOCTYPE html>
<html lang= “en”>
<head>
<meta charset= “UTF-8″/>
<meta http-equiv= “X-UA-Compatible” content=”IE-edge”/>
<meta name=”viewport” content=”width-device width, initial-scale
<title>Helloworld KC</title>
</head>
<body>
<h1>Título 1</h1>
<main>
<section>
<article>
<div>
<p>Soy un P</p>
</div>
</article>
<article>
<img src=” ” alt=””>
</article>
</section>
</main>
</body>
Como puedes ver en las líneas de código anteriores, hemos creado un archivo HTML con un esquema muy básico. Dentro de este esquema, la etiqueta body contiene un título “Título 1” definido con la etiqueta h1. También tenemos una etiqueta main con un section que contiene dos artículos, definidos con la etiqueta article. Dentro de una de las etiquetas article tenemos un div con un párrafo p, el segundo article contiene una imagen img.
Ten presente que lo que lo que el usuario ve en el navegador es lo que está contenido dentro de la etiqueta body. Esto quiere decir que el usuario no va a ver nada diferente en la interfaz cuando tenemos más o menos metas en el head.
Ahora que tenemos nuestro código, que se conecta al navegador gracias a la herramienta live server en Visual Studio Code, podemos preguntarnos dónde está el DOM dentro del navegador. ¡Está en el inspector web! Por ello, a continuación, te enseñaremos cómo entender el DOM desde el inspector.
¿Cómo entender el DOM desde el inspector?
En nuestro post sobre cómo funciona el inspector web, te hemos explicado que esta herramienta en Google Chrome tiene varios apartados. Uno de ellos es elements. Allí es donde podremos entender el DOM desde el inspector, pues es allí donde el navegador nos pinta y nos indica qué es cada cosa.
Siguiendo el código que te hemos mostrado, en el apartado elements de nuestro inspector encontraremos tres secciones: HTML, head y body. Ten presente que el HTML será todo lo que estemos pintando y que el head no se muestra, por lo que te explicamos en la nota anterior. Por ello, solo vale la pena que revises la sección de body.
Ahora, al desplegar la sección body, veremos el árbol jerárquico de etiquetas HTML que hemos creado en nuestro código anterior. Es decir, allí vemos un h1 y un main. Dentro del main tenemos una section en donde a su vez están dos article. Todo esto lo revelamos a medida que desplegamos cada etiqueta HTML, explorando las jerarquías que hemos creado.
Abrir esta herramienta en nuestro navegador nos permite entender el DOM desde el inspector, pues estamos viendo sus dos aspectos. En el navegador vemos el DOM interpretado y renderizado, mientras que en el inspector vemos el DOM tal cual lo hemos desarrollado nosotros.
¿Cuál es el siguiente paso?
Ahora que sabes cómo entender el DOM desde el inspector, ¡te invitamos a que utilices este conocimiento al desarrollar tus propios proyectos! Nuestros profesores, expertos en el sector, te acompañarán en este proceso con nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar proyectos con lenguajes como JavaScript, HTML, CSS y JSX. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Solicita información y cambia tu vida!
