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 ver y cambiar el DOM de una página con las Herramientas para desarrolladores de Chrome.

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

Cómo ver los nodos del DOM

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

Cómo inspeccionar 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 Inspect.
   • Miguel Ángel
   • Raphael Se abrirá el panel Elements de Herramientas para desarrolladores. <li>Michelangelo</li> se destaca en el árbol del DOM.
2. Haz clic en el ícono Inspeccionar en la esquina superior izquierda de Herramientas para desarrolladores.

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

   • Tokio

   • Beirut

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

La inspección de un nodo también es el primer paso para ver y cambiar sus estilos. Consulta Cómo comenzar a ver y cambiar el código CSS.

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

Una vez que selecciones un nodo en el árbol del DOM, podrás navegar por el árbol del DOM con el teclado.

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

   • George
   • Ringo
   • Paul

   • John

     

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

   

3. Presiona la flecha hacia la izquierda. La lista <ul> se contrae.

4. Vuelve a presionar la tecla de flecha izquierda. Se selecciona el superior del nodo <ul>. En este caso, es el 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 flecha hacia la derecha. La lista se expandirá.

Desplazar para que sea visible

Cuando veas el árbol del DOM, a veces encontrarás interés en 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> en la parte superior de la página. La opción Desplazarse en la vista te permite cambiar la posición del viewport con rapidez 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 a la vista 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 aquí.

Mostrar reglas

Con las reglas 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.

Habilita las reglas de una de estas dos maneras:

• Presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú Comando, escribe Show rulers on hover y presiona Intro.
• Marca Configuración > Preferencias > Elementos > Mostrar reglas al colocar 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 Elementos.
2. Presiona Control + F o Command + 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 está resaltada en el árbol del DOM.

   

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 muestra 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, borra la casilla de verificación Configuración > Preferencias > Global > Buscar mientras escribes.

Edita el DOM

Puedes editar el DOM en el momento 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 (Inspect).

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

   • Howard
   • Vicente

2. Haz doble clic en <li>. El texto se destaca para indicar que el nodo está seleccionado.

   

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.

   

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

Editar tipo de nodo

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

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 presiona Intro. El nodo <li> cambia a un nodo <button>.

   

Editar como HTML

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

   • Penny
   • Howard
   • Raúl
   • Leonardo

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 iniciar una nueva línea y comenzar a escribir <l. La Herramienta para desarrolladores destaca la sintaxis HTML y autocompleta las etiquetas por ti.

   

   Nota: Además, las Herramientas para desarrolladores pueden autocompletar las propiedades del DOM.

4. Selecciona el elemento li del menú de autocompletar y escribe >. Las Herramientas para desarrolladores agregan 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.

   

Duplica un nodo

Si deseas duplicar un elemento, puedes hacer clic con el botón derecho en Duplicar elemento.

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

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

   

3. Regresa a la página. El elemento de la lista se duplicó al instante.

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 realizar una captura de pantalla de cualquier nodo individual en el árbol del DOM con la opción Tomar 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 Elements, haz clic con el botón derecho en la URL de la imagen y selecciona Capture node screenshot en el menú desplegable.

   

3. La captura de pantalla se guardará en tus 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.

   

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
   • Delito y castigo
   • Moby Dick

2. Haz clic con el botón derecho en El señor de las moscas arriba 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. Consulta Apéndice: Opciones faltantes si no ves esta opción. El color de fondo sigue siendo naranja, aunque no coloques 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 Inspect.

   • 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. El nodo se vuelve a mostrar.

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
   • Bases

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

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

Accede a los nodos en Console

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

Haz referencia al nodo seleccionado actualmente con $0

Cuando inspeccionas un nodo, el texto == $0 junto a él significa que puedes hacer referencia a este nodo en la consola 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 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>.

   

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 vuelve a presionar Intro. 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. Haz clic con el botón derecho en The Big Sleep a continuación y selecciona Inspect.

   • El sueño profundo
   • La larga despedida

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

   

Copiar la ruta de JS

Copia la ruta de acceso de JavaScript a 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 Inspect.

   • Los hermanos Karamazov
   • Delito 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. Una expresión document.querySelector() que se resuelve en el nodo se copió en el portapapeles.

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

4. Presiona Intro para evaluar la expresión.

   

Interrupción en los cambios del DOM

Las Herramientas para desarrolladores te permiten pausar el código JavaScript de una página cuando este modifica el DOM. Consulta Interrupciones de cambio de DOM.

Próximos pasos

Eso abarca la mayoría de las funciones relacionadas con el DOM en Herramientas para desarrolladores. Puedes descubrir el resto haciendo clic con el botón derecho en los nodos del árbol del DOM y experimentando 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 Herramientas para desarrolladores de Chrome y descubre todo lo que puedes hacer con las Herramientas para desarrolladores.

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

Apéndice: HTML en comparación con DOM

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

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

<!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 el siguiente:

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 código 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 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.

Para obtener más información, consulta Introducción al DOM.

Apéndice: Desplazarse a la vista

Esta es una continuación de la sección Desplazarse en la vista. Sigue las instrucciones que aparecen a continuación para completar la sección.

1. El nodo <li>Magritte</li> debería seguir seleccionado en tu árbol del DOM. De lo contrario, vuelve a Desplazarte a la vista y vuelve a empezar.

2. Haz clic con el botón derecho en el nodo <li>Magritte</li> y selecciona Desplazarse en la vista. El viewport se desplaza hacia arriba para que puedas ver el nodo Magritte. Consulta Apéndice: Opciones faltantes si no puedes ver la opción Desplazarse en la vista.

   

Apéndice: opciones faltantes

En muchas de las instrucciones de este instructivo, se indica que hagas clic con el botón derecho en un nodo del árbol del DOM y luego selecciones una opción del menú contextual emergente. Si no ves la opción especificada en el menú contextual, intenta hacer clic con el botón derecho fuera del texto del nodo.