¿Cómo entender el DOM desde el inspector?

Autor: | Última modificación: 17 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!