Comienza a ver y cambiar el DOM

Edita el DOM

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

Edita contenido

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

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

   • Fry
   • 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 anterior cambia de Michelle a Leela.

Editar atributos

Para editar atributos, haz doble clic en el nombre o valor del atributo. Sigue las instrucciones que se indican a continuación para aprender a agregar atributos a un nodo.

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

   • Howard
   • Vince

2. Haz doble clic en <li>. 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.

   

También puedes usar la opción Editar atributo del menú contextual.

Editar el tipo de nodo

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

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

   • Dean
   • Nicky
   • Tadeo
   • 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 autocompletado, 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 Elementos, haz clic con el botón derecho en el nodo actual y selecciona Editar como HTML en el menú desplegable.

   

3. Presiona Intro para comenzar una línea nueva y comienza a escribir <l. DevTool destaca la sintaxis HTML y completa automáticamente las etiquetas por ti.

   

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 / Comando + Intro para aplicar los cambios.

   

Cómo duplicar un nodo

Puedes duplicar un elemento con la opción Duplicar elemento que se encuentra en el menú contextual.

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

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

2. En el panel Elementos, 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. El elemento de la lista se duplicó de inmediato.

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 una captura de pantalla de cualquier nodo individual del árbol de DOM con Capturar captura de pantalla del nodo.

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 guardará en tus descargas.

   

Para obtener más información sobre cómo tomar capturas de pantalla con DevTools, consulta 4 formas de tomar capturas de pantalla con DevTools.

Reordena los nodos del DOM

Arrastra los nodos para reordenarlos.

1. Haz clic con el botón derecho en Elvis Presley a continuación y selecciona Inspeccionar. Observa que 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 señor de las moscas a continuación. 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 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 Force State > :hover. Consulta el Apéndice: Opciones faltantes si no ves esta opción. El color de fondo permanece naranja, aunque no estés colocando el cursor sobre el nodo.

Cómo ocultar un nodo

Presiona H para ocultar un nodo.

1. Haz clic con el botón derecho en The Stars My Destination a continuación y selecciona Inspeccionar.

   • El conde de Montecristo
   • The Stars My Destination

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 Ocultar elemento.

   

3. Vuelve a presionar la tecla H. Se vuelve a mostrar el nodo.

Borrar un nodo

Presiona Borrar para borrar un nodo.

1. Haz clic con el botón derecho en Foundation a continuación y selecciona Inspect.

   • El hombre ilustrado
   • 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 Eliminar elemento.

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

Accede a los nodos en la consola

DevTools proporciona algunos atajos para acceder a los nodos del DOM desde la consola o obtener referencias de JavaScript a ellos.

Cómo hacer referencia al nodo seleccionado actualmente con USD 0

Cuando inspeccionas un nodo, el texto == $0 junto a él significa que puedes hacer referencia a este nodo en Console con la variable $0.

1. Haz clic con el botón derecho en La mano izquierda de la oscuridad a continuación y selecciona Inspeccionar.

   • La mano izquierda de la oscuridad
   • Dune

2. Presiona la tecla Escape para abrir el panel lateral Console.

3. Escribe $0 y presiona la tecla Intro. El resultado de la expresión muestra 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 la ventana de visualización.

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

   

Almacena como variable global

Si necesitas volver a consultar un nodo varias veces, almacénalo como una variable global.

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

   • El sueño eterno
   • 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. Consulta el Apéndice: Opciones faltantes si no ves esta opción.

3. Escribe temp1 en la consola y, luego, presiona Intro. El resultado de la expresión muestra que la variable se evalúa como el nodo.

   

Cómo copiar la ruta de JS

Copia la ruta de JavaScript a un nodo cuando necesites hacer referencia a ella en una prueba automatizada.

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

   • Los hermanos Karamazov
   • 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 la 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 (Mac) para pegar la expresión en la consola.

4. Presiona Intro para evaluar la expresión.

   

Pausa en los cambios del DOM

DevTools te permite pausar el código JavaScript de una página cuando este modifica el DOM. Consulta Puntos de interrupción de cambio de DOM.

Próximos pasos

Esto abarca la mayoría de las funciones relacionadas con el DOM en DevTools. Para descubrir el resto, haz clic con el botón derecho en los nodos del árbol del DOM y experimenta con las otras opciones que no se abordaron en este instructivo. Consulta también las combinaciones de teclas del panel Elementos.

Consulta la página principal de las Herramientas para desarrolladores de Chrome para descubrir todo lo que puedes hacer con ellas.

Consulta Comunidad si quieres comunicarte con el equipo de DevTools o obtener ayuda de la comunidad de DevTools.

Apéndice: 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 muestra HTML de la siguiente manera:

<!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 como este:

html
  head
    title
  body
    h1
    p
    script

Este árbol de objetos o nodos que representa el contenido de la página se denomina DOM. En este momento, se ve igual que el HTML, pero supongamos que la secuencia de comandos a la que se hace referencia en la parte inferior del HTML ejecuta este código:

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. El DOM completo ahora se ve así:

html
  head
    title
  body
    p
    script
    p

El código HTML de la página ahora es diferente de su DOM. En otras palabras, el HTML representa el contenido inicial de la página y el DOM representa el contenido actual de la página. Cuando JavaScript agrega, quita o edita nodos, el DOM se vuelve diferente del HTML.

Consulta Introducción al DOM para obtener más información.

Apéndice: Desplazar hasta que sea visible

Esta es una continuación de la sección Desplázate hasta que aparezca en la pantalla. Sigue las instrucciones que se indican a continuación para completar la sección.

1. El nodo <li>Magritte</li> debería seguir seleccionado en el árbol DOM. De lo contrario, vuelve a Desplazarse hasta que aparezca en la vista y comienza de nuevo.

2. Haz clic con el botón derecho en el nodo <li>Magritte</li> y selecciona Desplazar a la vista. La ventana de visualización se desplaza hacia arriba para que puedas ver el nodo Magritte. Consulta el Apéndice: Opciones faltantes si no ves la opción Desplazar a la vista.

   

Apéndice: Opciones faltantes

Muchas de las 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 fuera del texto del nodo.