Comienza a ver y cambiar el DOM

Kayce Basques

Sofia Emelianova

Mira el video y completa estos instructivos interactivos para aprender los conceptos básicos de cómo ver y cambiar el DOM de una página con las Herramientas para desarrolladores de Chrome.

En este instructivo, se supone que conoces la diferencia entre el DOM y HTML. Repasa el apéndice: HTML versus el DOM.

Cómo ver los nodos del DOM

El árbol del DOM del panel Elementos es donde realizas todas las actividades relacionadas con el DOM en las Herramientas para desarrolladores.

Cómo inspeccionar un nodo

Cuando te interese un nodo del DOM en particular, Inspeccionar es una forma rápida de abrir las Herramientas para desarrolladores y analizar ese nodo.

1. En la siguiente lista, haz clic con el botón derecho en Michelangelo. En el menú, selecciona Inspeccionar.

   • Miguel Ángel
   • Rafael

   Se abrirá el panel Elements de DevTools. <li>Michelangelo</li> se destaca en el árbol del DOM.

   

2. Haz clic en Seleccionar un elemento.

3. Selecciona Tokio en la siguiente lista.

   • Tokio
   • Beirut

   <li>Tokyo</li> se destaca en el árbol del DOM.

Inspeccionar un nodo también es el primer paso para ver y cambiar los estilos y el CSS de un nodo.

Cómo navegar por el árbol del DOM con un teclado

Una vez que hayas seleccionado un nodo en el árbol del DOM, puedes navegar por él con el teclado.

1. En la siguiente lista, haz clic con el botón derecho en Ringo y selecciona Inspeccionar. <li>Ringo</li> está seleccionado en el árbol del DOM.

   • George
   • Ringo
   • Paul

   • John

     

2. Presiona la tecla de flecha hacia arriba 2 veces. Se seleccionó <ul>.

   

3. Presiona la tecla de flecha hacia la izquierda. Se contrae la lista <ul>.

4. Vuelve a presionar la tecla de flecha hacia la izquierda. Se selecciona el elemento superior del nodo <ul>. En este caso, es el nodo <li> que contiene las instrucciones para el paso 1.

5. Presiona la tecla de flecha hacia abajo 3 veces para volver a seleccionar la lista <ul> que acabas de contraer. Debería verse así: <ul>...</ul>

6. Presiona la tecla de flecha hacia la derecha. La lista se expande.

Desplazar hasta que sea visible

Cuando veas el árbol del DOM, a veces te encontrarás en un nodo del DOM que no está en el viewport. Por ejemplo, supongamos que te desplazaste hasta la parte inferior de la página y te interesa el nodo <h1> que se encuentra en la parte superior. Desplazar a la vista te permite cambiar rápidamente la posición del viewport para que puedas ver el nodo.

1. En la siguiente lista, haz clic con el botón derecho en Magritte y selecciona Inspeccionar.

   • Magritte
   • Soutine

2. Desplázate hasta la sección del apéndice Desplázate hasta la vista para obtener instrucciones adicionales.

Cuando termines, vuelve a esta sección.

Mostrar reglas

Con las reglas en tu viewport, puedes medir el ancho y la altura de un elemento cuando colocas el cursor sobre él en el panel Elementos.

Habilita las reglas de una de las siguientes maneras:

• Presiona Ctrl + Mayúsculas + P o Cmd + Mayúsculas + P (macOS) para abrir el menú de comandos, escribe Show rulers on hover y presiona Intro.
• Verifica la configuración Configuración > Preferencias > Elementos > Mostrar reglas cuando se coloca el cursor sobre un elemento.

La unidad de tamaño de las reglas son los píxeles.

Buscar nodos

Puedes buscar en el árbol del DOM por cadena, selector CSS o selector XPath.

1. Enfoca el cursor en el panel Elements.
2. Presiona Control + F o Comando + F (macOS). La barra de búsqueda se abre en la parte inferior del árbol del DOM.

3. Tipo The Moon is a Harsh Mistress. La última oración se destaca en el árbol del DOM.

   

La barra de búsqueda también admite selectores CSS y XPath.

El panel Elements selecciona el primer resultado coincidente en el árbol del DOM y lo desplaza a la vista en el viewport. De forma predeterminada, esto sucede a medida que escribes. Si siempre trabajas con búsquedas largas, puedes hacer que las Herramientas para desarrolladores ejecuten la búsqueda solo cuando presiones Intro.

Para evitar saltos innecesarios entre nodos, desmarca la casilla de verificación configuración Configuración > Preferencias > Global > Buscar mientras escribes.

Edita el DOM

Puedes editar el DOM sobre la marcha y ver cómo esos cambios afectan la página.

Editar contenido

Para editar el contenido de un nodo, haz doble clic en el contenido en el árbol del DOM.

1. En la siguiente lista, haz clic con el botón derecho en Michelle y selecciona Inspeccionar.

   • Freír
   • Michelle

2. En el árbol del DOM, haz doble clic en Michelle. En otras palabras, haz doble clic en el texto entre <li> y </li>. El texto se destaca en azul para indicar que está seleccionado.

   

3. Borra Michelle, escribe Leela y, luego, presiona Intro para confirmar el cambio. El texto cambia de Michelle a Leela.

Editar atributos

Para editar los atributos, haz doble clic en el nombre o el valor del atributo. Sigue estas instrucciones para aprender a agregar atributos a un nodo.

1. En la siguiente lista, haz clic con el botón derecho en Howard y selecciona Inspeccionar.

   • Howard
   • Vince

2. Expande <ul> y, luego, haz doble clic en <li> para editarlo. El texto se destaca para indicar que el nodo está seleccionado.

   

3. Presiona la tecla de flecha derecha, agrega un espacio, escribe style="background-color:gold" y, luego, presiona Intro. El color de fondo del nodo cambia a dorado.

   

Editar tipo de nodo

Para editar el tipo de un nodo, haz doble clic en el tipo y, luego, escribe el nuevo tipo.

1. En la siguiente lista, haz clic con el botón derecho en Hank y selecciona Inspeccionar.

   • Dean
   • Nicky
   • Thaddeus
   • Brock

2. Haz doble clic en <li>. Se destaca el texto li.

3. Borra li, escribe button y, luego, presiona Intro. El nodo <li> cambia a un nodo <button>.

   

Editar como HTML

Para editar nodos como HTML con resaltado de sintaxis y autocompletar, selecciona Editar como HTML en el menú desplegable del nodo.

1. Haz clic con el botón derecho en Leonard a continuación y selecciona Inspeccionar.

   • Centavo
   • Howard
   • Rajesh
   • Leonard

2. En el panel Elements, haz clic con el botón derecho en el nodo actual y selecciona Edit as HTML en el menú desplegable.

   

3. Presiona Intro para iniciar una nueva línea y comienza a escribir <l. DevTools destaca la sintaxis HTML y sugiere etiquetas para autocompletar.

   

4. Selecciona el elemento li en el menú de autocompletado y escribe >. DevTools agrega automáticamente la etiqueta de cierre </li> después del cursor.

   

5. Escribe Sheldon dentro de la etiqueta y presiona Control o Comando + Intro para aplicar los cambios.

Duplicar un nodo

Puedes duplicar un elemento con la opción Duplicar elemento que aparece cuando haces clic con el botón derecho.

1. Haz clic con el botón derecho en Nana en la siguiente lista y selecciona Inspeccionar.

   • La hoguera de las vanidades
   • Nana
   • Orlando
   • Ruido blanco

2. En el panel Elements, haz clic con el botón derecho en <li>Nana</li> y selecciona Duplicate element en el menú desplegable.

   

3. Regresa a la página. Se duplicó el elemento de la lista.

También puedes usar las combinaciones de teclas: Mayúsculas + Alt + flecha hacia abajo (Windows y Linux) y Mayúsculas + Opción + flecha hacia abajo (macOS).

Cómo tomar una captura de pantalla de un nodo

Puedes tomar capturas de pantalla de cualquier nodo individual en el árbol del DOM.

1. Haz clic con el botón derecho en cualquier imagen de esta página y selecciona Inspeccionar.

2. En el panel Elementos, haz clic con el botón derecho en la URL de la imagen y selecciona Capturar captura de pantalla del nodo en el menú desplegable.

   

3. La captura de pantalla se guarda en tus descargas (Windows y macOS).

Obtén más información en 4 formas de capturar pantallas con Herramientas para desarrolladores.

Reordena los nodos del DOM

Arrastra los nodos para reordenarlos.

1. En la siguiente lista, haz clic con el botón derecho en Elvis Presley y selecciona Inspeccionar. Es el último elemento de la lista.

   • Stevie Wonder
   • Tom Waits
   • Chris Thile
   • Elvis Presley

2. En el árbol del DOM, arrastra <li>Elvis Presley</li> a la parte superior de la lista.

Forzar estado

Puedes forzar a los nodos a permanecer en estados como :active, :hover, :focus, :visited y :focus-within.

1. Coloca el cursor sobre el elemento de lista El señor de las moscas. El color de fondo se vuelve naranja.

   • El señor de las moscas
   • Crimen y castigo
   • Moby Dick

2. Haz clic con el botón derecho en el elemento de lista El señor de las moscas y selecciona Inspeccionar.

3. Haz clic con el botón derecho en <li class="demo--hover">The Lord of the Flies</li> y selecciona Forzar estado > :hover. Si no ves esta opción, lee el apéndice sobre las opciones faltantes.

   El color de fondo sigue siendo naranja, aunque no estés colocando el cursor sobre el nodo.

Cómo ocultar un nodo

Presiona H para ocultar un nodo.

1. En la siguiente lista, haz clic con el botón derecho en Las estrellas, mi destino y selecciona Inspeccionar.

   • El conde de Montecristo
   • Las estrellas, mi destino

2. Presiona la tecla H. El nodo está oculto. También puedes hacer clic con el botón derecho en el nodo y usar la opción Hide element.

   

3. Vuelve a presionar la tecla H. El nodo se vuelve a mostrar.

Borrar un nodo

Presiona Borrar para borrar un nodo.

1. En la siguiente lista, haz clic con el botón derecho en Foundation y selecciona Inspeccionar.

   • The Illustrated Man
   • A través del espejo
   • Base

2. Presiona la tecla Borrar. Se borra el nodo. También puedes hacer clic con el botón derecho en el nodo y usar la opción Delete element.

3. Presiona Control + Z o Comando + Z (macOS). Se deshace la última acción y vuelve a aparecer el nodo.

Accede a los nodos en la consola

Las Herramientas para desarrolladores proporcionan algunos accesos directos para acceder a los nodos del DOM desde la consola o para obtener referencias de JavaScript a ellos.

Haz referencia al nodo seleccionado actualmente con $0

Cuando inspeccionas un nodo (incluidos los seudoelementos como ::before o ::after), el texto == $0 junto al nodo significa que puedes hacer referencia a este nodo en la consola con la variable $0.

1. Haz clic con el botón derecho en el elemento de la lista The Left Hand of Darkness y selecciona Inspeccionar.

   • La mano izquierda de la oscuridad
   • Duna

2. Presiona la tecla Escape para abrir el panel lateral de la consola. Es posible que debas seleccionar Consola para abrirla.

3. Escribe $0 y presiona la tecla Intro. El resultado de la expresión es que $0 se evalúa como <li>The Left Hand of Darkness</li>.

   

4. Coloca el cursor sobre el resultado. El nodo se destaca en el viewport.

5. Haz clic en <li>Dune</li> en el árbol del DOM, vuelve a escribir $0 en la consola y, luego, presiona Intro de nuevo. Ahora, $0 se evalúa como <li>Dune</li>.

   

Almacenar como variable global

Si necesitas hacer referencia a un nodo muchas veces, almacénalo como una variable global.

1. En la siguiente lista, haz clic con el botón derecho en The Big Sleep y selecciona Inspeccionar.

   • The Big Sleep
   • The Long Goodbye

2. Haz clic con el botón derecho en <li>The Big Sleep</li> en el árbol del DOM y selecciona Almacenar como variable global. Si no encuentras esta opción, consulta las opciones faltantes.

3. Escribe temp1 en la consola y, luego, presiona Intro. El resultado de la expresión muestra que la variable se evalúa en el nodo. Haz clic en el nodo para expandir el elemento de la lista.

   

Copiar ruta de acceso de JS

Copia la ruta de acceso de JavaScript a un nodo para hacer referencia a él en una prueba automatizada.

1. En la siguiente lista, haz clic con el botón derecho en Los hermanos Karamazov y selecciona Inspeccionar.

   • Los hermanos Karamázov
   • Crimen y castigo

2. Haz clic con el botón derecho en <li>The Brothers Karamazov</li> en el árbol del DOM y selecciona Copiar > Copiar ruta de JS. Se copió en el portapapeles una expresión document.querySelector() que se resuelve en el nodo.

3. Presiona Control + V o Comando + V (macOS) para pegar la expresión en la consola.

4. Presiona Intro para evaluar la expresión.

   

Detén la ejecución cuando se produzcan cambios en el DOM

Las Herramientas para desarrolladores te permiten pausar el JavaScript de una página cuando este modifica el DOM. Obtén más información sobre los puntos de interrupción de cambios en el DOM.

Próximos pasos

Esto abarca la mayoría de las funciones relacionadas con el DOM en las Herramientas para desarrolladores. Para descubrir el resto, haz clic con el botón derecho en los nodos del árbol del DOM y experimenta con las opciones que no se trataron en este instructivo.

Sigue leyendo:

• Obtén información sobre las combinaciones de teclas del panel Elementos.
• Lee más documentación de Herramientas para desarrolladores para descubrir todo lo que puedes hacer con ellas.

Participa en la comunidad de Herramientas para desarrolladores para comunicarte con el equipo de Herramientas para desarrolladores o recibir ayuda de otros desarrolladores.

Apéndice

Obtén más información sobre temas específicos.

HTML en comparación con el DOM

En esta sección, se explica rápidamente la diferencia entre HTML y el DOM.

Cuando usas un navegador web para solicitar una página como https://example.com, el servidor devuelve un documento HTML:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

El navegador analiza el código HTML y crea un árbol de objetos:

html
  head
    title
  body
    h1
    p
    script

Este árbol de objetos, o nodos, representa el contenido de la página. Esto se llama modelo de objetos del documento o DOM, para abreviar. En este momento, los objetos son los mismos en el DOM y en el HTML.

Supongamos que el archivo script.js en la parte inferior del HTML incluía las siguientes funciones:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Ese código quita el nodo h1 y agrega otro nodo p al DOM. Ahora, el DOM se ve de la siguiente manera:

html
  head
    title
  body
    p
    script
    p

El HTML de la página ahora es diferente de su DOM.

El HTML representa el contenido inicial de la página, y el DOM representa el contenido activo y actual de la página. Cuando JavaScript agrega, quita o edita nodos, el DOM se vuelve diferente del HTML.

Obtén más información en la Introducción al DOM de MDN.

Desplazar hasta que sea visible

Esta es una continuación de la sección Desplazamiento a la vista. Sigue las instrucciones para completar la sección.

1. El nodo <li>Magritte</li> debería seguir seleccionado en el árbol del DOM. Si no es así, vuelve a Scroll into view y comienza de nuevo.

2. Haz clic con el botón derecho en el nodo <li>Magritte</li> y selecciona Desplazar a la vista. El viewport se desplaza hacia arriba para que puedas ver el nodo Magritte. Si no aparece la opción Desplazarse para mostrar, consulta opciones faltantes.

   

Faltan opciones

Muchas instrucciones de este instructivo te indican que hagas clic con el botón derecho en un nodo del árbol del DOM y, luego, selecciones una opción del menú contextual que aparece. Si no ves la opción especificada en el menú contextual, intenta hacer clic con el botón derecho lejos del texto del nodo.