Comienza a ver y cambiar el DOM

Kayce Basques

Sofia Emelianova

Mira el video y completa estos tutoriales interactivos para aprender los conceptos básicos de visualización 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 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 investigarlo.

1. Haz clic con el botón derecho en Michelangelo a continuación y selecciona Inspect.
   • Miguel Ángel
   • Rafael 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.

Inspeccionar 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, puedes navegar por el árbol del DOM con tu 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

     

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

Al ver el árbol del DOM, algunas veces te interesará un nodo del DOM que sea no están actualmente en el viewport. Por ejemplo, supongamos que te desplazaste hasta la parte inferior de la y te interesa el nodo <h1> en la parte superior de la página. Cómo desplazarse hacia 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 Elements.

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.
• Revisa Configuración > Preferencias > Elements > 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 Elements.
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 Configuración > Preferencias > Global > Casilla de verificación Search 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 cambios anteriores de Michelle a Leela.

Editar atributos

Para editar los atributos, haz doble clic en el nombre o valor del atributo. Sigue las instrucciones 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 seleccionado.

   

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

   

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 <button>. el nodo de inicio de sesión.

   

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.

   • Centavo
   • Howard
   • Rajesh
   • Leonard

2. En el panel Elements, haz clic con el botón derecho en el nodo actual y selecciona Elements 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 Duplicar elemento 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 obtener 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.

   

Para descubrir más formas de tomar capturas de pantalla con Herramientas para desarrolladores, consulta las 4 formas de realizar capturas de pantalla con Herramientas para desarrolladores.

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
   • 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 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 algunos accesos directos a los nodos del DOM desde la consola, o bien hace referencia a ellas de JavaScript.

Haz referencia al nodo seleccionado actualmente con $0

Cuando inspeccionas un nodo, el texto == $0 junto al nodo significa que puedes hacer referencia a este 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, luego, presiona Vuelve a presionar Intro. Ahora, $0 se evalúa como <li>Dune</li>.

   

Almacenar como variable global

Si necesitas 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
   • 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 de entorno. 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 un 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 Copiar > Copia la ruta de JS. Una expresión document.querySelector() que resuelve lo siguiente: se copió el nodo en el portapapeles.

3. Presiona Control + V o Comando + V (Mac) para y 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 estaban disponibles que se abordan en este instructivo. Consulta también Combinaciones de teclas del panel de elementos.

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

Ve a la Comunidad si quieres comunicarte con el equipo de Herramientas para desarrolladores. u obtener ayuda de la comunidad de Herramientas para desarrolladores.

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 devuelve 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 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 busca así:

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 uses 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 el más abajo para completar la sección.

1. El nodo <li>Magritte</li> debería seguir seleccionado en tu árbol del DOM. Si no, vuelve a Desplázate hasta 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. Tu viewport se desplaza crear una copia de seguridad para que puedas ver el nodo de Magritte. Consulta Apéndice: Opciones faltantes si no puedes ver la opción Desplazarse en la vista.

   

Apéndice: opciones faltantes

Muchas de las instrucciones de este instructivo indican que debes hacer clic con el botón derecho en un nodo del árbol del DOM. y, luego, selecciona una opción del menú contextual que aparece. Si no ves la configuración en el menú contextual, intenta hacer clic con el botón derecho fuera del texto del nodo.