Comienza a ver y cambiar el DOM

Kayce Basques
Kayce Basques
X GitHub Error
Sofia Emelianova
Sofia Emelianova
GitHub

Mira el video y completa estos instructivos interactivos para aprender los conceptos básicos de ver y cambiar el DOM de una página con Chrome DevTools.

En este instructivo, se supone que conoces la diferencia entre el DOM y el HTML. Consulta el Apéndice: HTML en comparación con el DOM para obtener una explicación.

Cómo ver los nodos del DOM

En el árbol del DOM del panel Elements, puedes realizar todas las actividades relacionadas con el DOM en DevTools.

Inspecciona un nodo

Cuando te interesa un nodo DOM en particular, Inspeccionar es una forma rápida de abrir DevTools y analizar ese nodo.

  1. Haz clic con el botón derecho en Michelangelo a continuación y selecciona Inspeccionar.
    • Miguel Ángel
    • Raphael Cómo inspeccionar un nodo Se abre el panel Elementos de DevTools. <li>Michelangelo</li> se destaca en el árbol del DOM. Destaca el nodo Michelangelo<
  2. Haz clic en el ícono Inspeccionar en la esquina superior izquierda de DevTools.El ícono de Inspect

  3. Haz clic en el texto Tokio que aparece a continuación.

    • Tokio

    • Beirut

      Ahora, <li>Tokyo</li> se destaca en el árbol de DOM.

Inspeccionar un nodo también es el primer paso para ver y cambiar los estilos de un nodo. Consulta Cómo comenzar a ver y cambiar el CSS.

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

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

  1. Haz clic con el botón derecho en Ringo a continuación y selecciona Inspeccionar. Se seleccionó <li>Ringo</li> en el árbol del DOM.

    • George
    • Ringo
    • Paul

    • John

      Inspecciona el nodo Ringo

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

    Inspecciona el nodo 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 de la siguiente manera: <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 interesará un nodo del DOM que no se encuentra en la ventana de visualización. Por ejemplo, supongamos que te desplazaste hasta la parte inferior de la página y te interesa el nodo <h1> en la parte superior de la página. Desplazarse hasta que aparezca en la vista te permite cambiar rápidamente la posición de la ventana de visualización para que puedas ver el nodo.

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

    • Magritte
    • Soutine

  2. Ve a la sección Apéndice: Desplázate hasta que se vea en la parte inferior de esta página. Las instrucciones continúan allí.

Después de completar las instrucciones que se encuentran en la parte inferior de la página, deberías volver a esta sección.

Mostrar reglas

Con las reglas que se encuentran arriba y a la izquierda del viewport, puedes medir el ancho y la altura de un elemento cuando colocas el cursor sobre él en el panel Elementos.

Reglas

Habilita las reglas de una de las siguientes maneras:

  • Presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos, escribe Show rulers on hover y presiona Intro.
  • Marca la opción Configuración > Preferencias > Elementos > Mostrar reglas al colocar el cursor sobre ellas.

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

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

  1. Coloca el cursor en el panel Elementos.
  2. Presiona Control+F o Comando+F (Mac). 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.

    Destaca la búsqueda en la barra de búsqueda

Como se mencionó anteriormente, la barra de búsqueda también admite selectores CSS y XPath.

El panel Elementos selecciona el primer resultado coincidente en el árbol del DOM y lo muestra en la ventana de visualización. De forma predeterminada, esto sucede a medida que escribes. Si siempre trabajas con búsquedas largas, puedes hacer que DevTools ejecute la búsqueda solo cuando presiones Intro.

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

Se quitó la casilla de verificación de la Búsqueda mientras escribes en Configuración.

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.

    Cómo editar el texto

  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.

    Cómo editar el nodo

  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.

    Agrega un atributo de estilo al nodo

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

Opciones del clic derecho con el atributo de edición destacado

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

    Cómo cambiar el tipo de nodo a botón

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.

    El menú desplegable de un nodo.

  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.

    Autocompletado de etiquetas HTML.

  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.

    Las Herramientas para desarrolladores cierran la etiqueta automáticamente.

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

    Se están aplicando 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.

    • Fuego fatuo
    • 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.

    La opción Duplicar elemento destacada en el menú desplegable.

  3. Regresa a la página. El elemento de 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.

    Se está capturando una captura de pantalla del nodo.

  3. La captura de pantalla se guardará en tus descargas.

    La captura de pantalla del nodo se guardó en 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.

    Arrastrar el nodo 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.

    Cómo se ve el nodo en el árbol del DOM después de que se oculta

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

    El resultado de la primera expresión de $0 en la consola

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

    El resultado de la segunda expresión $0 en la consola

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.

    El resultado de la expresión temp1

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.

    El resultado de la expresión Copy JS Path

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.

    Desplazar hasta que sea visible

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.

Dónde hacer clic si no ves todas las opciones