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.
- 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.
- Haz clic en el ícono Inspeccionar en la esquina superior izquierda de
Herramientas para desarrolladores.
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.
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
Presiona la flecha hacia arriba 2 veces. Se seleccionó
<ul>
.Presiona la flecha hacia la izquierda. La lista
<ul>
se contrae.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.Presiona la flecha hacia abajo 3 veces para volver a seleccionar
<ul>
. que acabas de contraer. Se verá de la siguiente manera:<ul>...</ul>
.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.
Haz clic con el botón derecho en Magritte a continuación y selecciona Inspeccionar.
- Magritte
- Soutine
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.
- Enfoca el cursor en el panel Elements.
- Presiona Control + F o Command + F (Mac). La barra de búsqueda se abre en la parte inferior del árbol del DOM.
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.
Haz clic con el botón derecho en Michelle a continuación y selecciona Inspeccionar (Inspect).
- Freír
- Michelle
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.Borra
Michelle
, escribeLeela
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.
Haz clic con el botón derecho en Howard a continuación y selecciona Inspect.
- Howard
- Vicente
Haz doble clic en
<li>
. El texto se destaca para indicar que el nodo seleccionado.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.
Haz clic con el botón derecho en Hank a continuación y selecciona Inspeccionar.
- Decana
- Nicky
- Thaddeus
- Brock
Haz doble clic en
<li>
. Se destaca el textoli
.Borra
li
, escribebutton
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.
Haz clic con el botón derecho en Leonard a continuación y selecciona Inspeccionar.
- Centavo
- Howard
- Rajesh
- Leonard
En el panel Elements, haz clic con el botón derecho en el nodo actual y selecciona Elements en el menú desplegable.
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.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.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.
Haz clic con el botón derecho en Nana a continuación y selecciona Inspeccionar.
- Fogata de los tocadores
- Nana
- Orlando
- Ruido blanco
En el panel Elements, haz clic con el botón derecho en
<li>Nana</li>
y selecciona Duplicar elemento en el menú desplegable.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.
Haz clic con el botón derecho en cualquier imagen de esta página y selecciona Inspeccionar.
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.
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.
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
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
.
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
Haz clic con el botón derecho en El señor de las moscas arriba y selecciona Inspeccionar.
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.
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
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.
Vuelve a presionar la tecla H. El nodo se vuelve a mostrar.
Borrar un nodo
Presiona Borrar para borrar un nodo.
Haz clic con el botón derecho en Foundation a continuación y selecciona Inspect.
- El hombre ilustrado
- A través del espejo
- Base
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.
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
.
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
Presiona la tecla Escape para abrir el panel lateral de la consola.
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>
.Coloca el cursor sobre el resultado. El nodo se destaca en el viewport.
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.
Haz clic con el botón derecho en The Big Sleep a continuación y selecciona Inspect.
- El sueño profundo
- La larga despedida
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.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.
Haz clic con el botón derecho en The Brothers Karamazov a continuación y selecciona Inspect.
- Los hermanos Karamazov
- Delito y castigo
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óndocument.querySelector()
que resuelve lo siguiente: se copió el nodo en el portapapeles.Presiona Control + V o Comando + V (Mac) para y pegaré la expresión en la consola.
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.
- 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. 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.