Comienza a ver y cambiar el DOM

Kayce vascos
Kayce Vascos
Sofía Emelianova
Sofía Emelianova

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 las Herramientas para desarrolladores de Chrome.

En este instructivo, se asume que conoces la diferencia entre el DOM y HTML. Consulta el Apéndice: HTML frente al DOM para obtener una explicación.

Ver nodos del DOM

En el árbol del DOM del panel Elements puedes realizar todas las actividades relacionadas con DOM en Herramientas para desarrolladores.

Inspecciona un nodo

Si te interesa un nodo del DOM en particular, Inspect es una forma rápida de abrir Herramientas para desarrolladores e investigar ese nodo.

  1. Haz clic con el botón derecho en Michelangelo a continuación y selecciona Inspeccionar.
    • Miguel Ángel
    • Rafael Inspecciona un nodo Se abrirá el panel Elements de Herramientas para desarrolladores. <li>Michelangelo</li> está destacado en el árbol del DOM. Destacando el nodo< Miguel Ángel
  2. Haz clic en el ícono Inspeccionar en la esquina superior izquierda de Herramientas para desarrolladores. El ícono de Inspeccionar
  3. Haz clic en el texto Tokio que aparece a continuación.

    • Tokio
    • Beirut

      Ahora, <li>Tokyo</li> está destacado en el árbol del DOM.

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

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

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

    • Jorge
    • Ringo
    • Paul
    • John

      Inspecciona el nodo de Ringo

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

    Inspecciona el nodo ul

  3. Presiona la tecla de flecha Izquierda. La lista de <ul> se contrae.

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

  5. Presiona la flecha hacia abajo 3 veces para volver a seleccionar la lista <ul> que acabas de contraer. Se verá de la siguiente manera: <ul>...</ul>

  6. Presiona la tecla de flecha Derecha. La lista se expande.

Desplazar hasta que sea visible

Cuando veas el árbol del DOM, es posible que te interese un nodo del DOM que actualmente 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> de la parte superior de la página. La opción Scroll into View te permite cambiar rápidamente la posición del viewport 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: Desplazarse para ver que se encuentra al final 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, debes regresar aquí.

Mostrar reglas

Con las reglas sobre y a la izquierda del viewport, puedes medir el ancho y el alto de un elemento si colocas el cursor sobre él en el panel Elements.

Reglas.

Puedes habilitar las reglas de dos maneras:

  • Presiona Ctrl + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú Comando, escribe Show rulers on hover y presiona Intro.
  • Consulta Configuración. Configuración > Preferencias > Elementos > Mostrar reglas al colocar el cursor sobre ellos.

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. Enfoca el cursor en el panel Elements.
  2. Presiona Ctrl + F o Cmd + F (en Mac). Se abrirá la barra de búsqueda 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 Elements selecciona el primer resultado coincidente en el árbol del DOM y lo coloca a la vista en el viewport. De forma predeterminada, esto sucede mientras escribes. Si siempre trabajas con búsquedas largas, puedes hacer que Herramientas para desarrolladores ejecute 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.

Se borró la casilla de verificación Buscar mientras escribes en Configuración.

Edita el DOM

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

Edita contenido

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

  1. Haz clic con el botón derecho en Michelle a continuación 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.

    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 los atributos, haz doble clic en el nombre o el valor del atributo. Sigue las instrucciones que aparecen 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
    • Vicente
  2. Haz doble clic en <li>. El texto se destaca para indicar que el nodo está seleccionado.

    Edita el nodo

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

    Cómo agregar un atributo de estilo al nodo

También puedes usar la opción Editar atributo para hacer clic con el botón derecho.

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

Editar tipo de nodo

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

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

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

    Cambia el tipo de nodo a botón

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.

    • Penny
    • Howard
    • Raúl
    • Leonardo
  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.

    El menú desplegable de un nodo.

  3. Presiona Intro para iniciar una nueva línea y comienza a escribir <l. Las Herramientas para desarrolladores destacan la sintaxis HTML y autocompleta las etiquetas por ti.

    Autocompletado de etiquetas HTML

  4. Selecciona el elemento li en el menú de autocompletar y escribe >. Las Herramientas para desarrolladores agregan automáticamente la etiqueta de cierre </li> después del cursor.

    Las Herramientas para desarrolladores cierran la etiqueta automáticamente.

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

    Aplicando cambios

Duplicar un nodo

Puedes duplicar un elemento con la opción de clic derecho Duplicar elemento.

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

    • La fogata de los tocadores
    • 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.

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

  3. Vuelve 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 (Mac OS).

Tomar una captura de pantalla del nodo

Para hacer una captura de pantalla de cualquier nodo individual en el árbol del DOM, usa Capture node screenshot.

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

  2. En el panel Elements, haz clic con el botón derecho en la URL de la imagen y selecciona Capture node screenshot en el menú desplegable.

    Se está realizando una captura de pantalla de un nodo.

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

    Se guardó la captura de pantalla del nodo en las descargas.

Reordenar 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 que los nodos permanezcan en estados como :active, :hover, :focus, :visited y :focus-within.

  1. Coloca el cursor sobre El señor de las moscas debajo. 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 The Lord of the Flies arriba y selecciona Inspect.

  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 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. Haz clic con el botón derecho en Destacar mi destino a continuación y selecciona Inspeccionar.

    • El conde de Montecristo
    • 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 una vez oculto

  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 Fundamentos a continuación y selecciona Inspeccionar.

    • El hombre ilustrado
    • A través del espejo
    • Modelos
  2. Presiona la tecla Borrar. Se borrará el nodo. También puedes hacer clic con el botón derecho en el nodo y usar la opción Borrar elemento.

  3. Presiona Control + Z o Comando + Z (en Mac). Se deshizo la última acción y el nodo volverá a aparecer.

Cómo acceder a los nodos en Console

Las Herramientas para desarrolladores proporcionan algunas combinaciones de teclas para acceder a nodos del DOM desde Console o para obtener referencias de JavaScript a ellos.

Hacer referencia al nodo seleccionado actualmente con $0

Cuando inspeccionas un nodo, el texto == $0 junto a él significa que puedes hacer referencia a él 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
    • Duna
  2. Presiona la tecla Escape para abrir el panel lateral de la consola.

  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 $0 en la consola

  4. Coloca el cursor sobre el resultado. El nodo está destacado en el viewport.

  5. Haz clic en <li>Dune</li> en el árbol del DOM, escribe $0 en la consola nuevamente 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

Almacenar como variable global

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

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

    • El sueño profundo
    • El adiós a largo plazo
  2. Haz clic con el botón derecho en <li>The Big Sleep</li>, en el árbol del DOM, y selecciona Store as global variable. Consulta el Apéndice: Opciones faltantes si no ves esta opción.

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

    El resultado de la expresión temp1

Copiar la ruta de JS

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

  1. Haz clic con el botón derecho en The Brothers 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 Copy > Copy JS Path. 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 Copiar ruta de JS

Interrupción en los cambios del DOM

Herramientas para desarrolladores te permite pausar el JavaScript de una página cuando el JavaScript modifica el DOM. Consulta Puntos de interrupción de cambio del DOM.

Próximos pasos

Esto abarca la mayoría de las funciones relacionadas con DOM en Herramientas para desarrolladores. Puedes descubrir el resto si haces clic con el botón derecho en los nodos del árbol del DOM y experimentas con las otras opciones que no se trataron en este instructivo. Consulta también Combinaciones de teclas del panel de elementos.

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

Consulta la Comunidad si quieres comunicarte con el equipo de Herramientas para desarrolladores o obtener ayuda de la comunidad de Herramientas para desarrolladores.

Apéndice: Comparación entre HTML y 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 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, luce 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 tiene el siguiente aspecto:

html
  head
    title
  body
    p
    script
    p

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

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

Apéndice: Desplazarse hasta que sea visible

Esta es una continuación de la sección Scroll into view. Sigue las instrucciones que aparecen a continuación para completar la sección.

  1. El nodo <li>Magritte</li> aún debe estar seleccionado en tu árbol del DOM. De lo contrario, vuelve a Desplazarse en la vista y vuelve a comenzar.
  2. Haz clic con el botón derecho en el nodo <li>Magritte</li> y selecciona Scroll into view. El viewport se desplaza hacia arriba para que puedas ver el nodo Magritte. Consulta el Apéndice: Opciones faltantes si no ves la opción Desplazarse en la vista.

    Desplazar hasta que sea visible

Apéndice: Faltan opciones

Muchas de las instrucciones de este instructivo te indican que debes hacer clic con el botón derecho en un nodo del árbol del DOM y, luego, seleccionar una opción del menú contextual que aparece. Si no ves la opción especificada en el menú contextual, haz clic con el botón derecho para salir del texto del nodo.

Dónde hacer clic si no aparecen todas las opciones