Introducción a cómo ver y cambiar DOM

Para obtener información sobre los conceptos básicos de visualización y cambio del modelo de objetos de documento (DOM) de una página mediante Microsoft Edge DevTools, siga estas secciones del tutorial interactivo.

Para comprender la diferencia entre DOM y HTML, consulte Apéndice: HTML frente al DOM, a continuación.

Visualización de nodos DOM

El árbol DOM de la herramienta Elementos es donde se realizan todas las actividades relacionadas con DOM en DevTools.

Inspección de un nodo

Cuando está interesado en un nodo DOM determinado, Inspeccionar es una manera rápida de abrir DevTools e investigar ese nodo.

1. Abra la página de demostración ejemplos DOM en una nueva ventana o pestaña. (Para abrir un vínculo en una nueva ventana o pestaña, haga clic con el botón derecho en el vínculo. O bien, mantenga presionada la tecla Ctrl (Windows, Linux) o Comando (macOS) y, a continuación, haga clic en el vínculo).

1. En la página web representada, en Inspeccionar un nodo, haga clic con el botón derecho en Miguel Ángel y, a continuación, seleccione Inspeccionar:

   

   Se abre la herramienta Elementos de DevTools. El <p>Michelangelo</p> nodo está resaltado en el árbol DOM:

   

2. Haga clic en el icono Inspeccionar () en la esquina superior izquierda de DevTools:

   

3. En Inspeccionar un nodo, haga clic en el texto de Tokio . Ahora, <p>Tokyo</p> el nodo está resaltado en el árbol DOM.

Inspeccionar un nodo también es el primer paso para ver y cambiar los estilos de un nodo. Consulte Introducción a la visualización y cambio de CSS.

Navegar por el árbol DOM con un teclado

Una vez que haya seleccionado un nodo en el árbol DOM, puede navegar por el árbol DOM con el teclado.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Navegar por el árbol DOM con un teclado, haga clic con el botón derecho en Ringo y, a continuación, seleccione Inspeccionar. <p>Ringo</p> está seleccionado en el árbol DOM:

   

3. Presione la tecla Flecha arriba dos veces. <div> está seleccionado:

   

4. Presione la tecla flecha izquierda . La <div> lista se contrae.

5. Presione de nuevo la tecla Flecha izquierda . Se selecciona el elemento primario del <div> nodo. En este caso, es el <section> que tiene el identificador navigate-the-dom-tree-with-a-keyboard-1.

6. Presione la tecla Flecha abajo dos veces, para que haya vuelto a seleccionar la <div> lista que acaba de contraer.

   Debería tener este aspecto: <div>... </div>.

7. Presione la tecla flecha derecha . La lista se expande.

Desplazarse a la vista

Al ver el árbol DOM, es posible que le interese un nodo DOM que no esté visible actualmente en la página web representada. Por ejemplo, supongamos que se ha desplazado hasta la parte inferior de la página y que está interesado en el <h1> nodo de la parte superior de la página. Desplazarse a la vista le permite cambiar rápidamente la posición de la ventanilla para que pueda ver el nodo.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Desplazarse a la vista, haga clic con el botón derecho en Magritte y, a continuación, seleccione Inspeccionar.

3. Desplácese hasta la parte inferior de la página Ejemplos dom.

4. El <p>Magritte</p> nodo todavía debe seleccionarse en el árbol DOM. Si no es así, vuelva a Desplazarse a la vista y vuelva a empezar.

5. Haga clic con el botón derecho en el <p>Magritte</p> nodo y, a continuación, seleccione Desplazarse a la vista:

   

   La ventanilla se desplaza hacia arriba para mostrar el nodo Magritte . Consulte Apéndice: Faltan opciones si no se muestra la opción Desplazarse a la vista .

Búsqueda de nodos

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

1. Centre el cursor en la herramienta Elementos , como haciendo clic en la pestaña Elementos .

2. Presione Ctrl+F (Windows, Linux) o Comando+F (macOS). La barra Buscar se abre en la parte inferior del árbol DOM.

3. Tipo La Luna es una amante dura. La última oración se resalta en el árbol DOM:

   

La barra de búsqueda también admite selectores CSS y XPath.

Edición del DOM

Puede editar el DOM en DevTools y ver cómo afectan los cambios a la página en tiempo real.

Editar contenido de texto

Para editar el contenido de texto de un nodo, haga doble clic en el contenido del árbol DOM, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Editar contenido, haga clic con el botón derecho en Michelle y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, haga doble clic en el texto Michelle, entre las <p> etiquetas y </p> . El texto está resaltado para indicar que está seleccionado:

   

4. Elimine Michelle, escriba Leelay presione Entrar para confirmar el cambio. El texto del DOM cambia de Michelle a Leela.

Editar o agregar atributos

Para editar un atributo existente, haga doble clic en el nombre o valor del atributo.

Para agregar un nuevo atributo, haga doble clic en el elemento para el que se va a agregar un atributo, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Editar atributos, haga clic con el botón derecho en Howard y, a continuación, seleccione Inspeccionar.

3. Haga doble clic en <p>. El texto está resaltado para indicar que el nodo está seleccionado:

   

4. Presione la tecla Flecha derecha , agregue un espacio, escriba style="background-color:gold"y presione Entrar. El color de fondo del nodo cambia a oro:

   

Editar nombre de etiqueta de nodo

Para editar el nombre de etiqueta de un nodo, haga doble clic en el nombre de la etiqueta y escriba el nuevo nombre de etiqueta.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Editar nombre de etiqueta de nodo, haga clic con el botón derecho en Hank y seleccione Inspeccionar.

3. Haga doble clic en <p>. El texto p está resaltado.

4. Elimine p, escriba buttony presione Entrar. El <p> nodo cambia a un <button> nodo:

   

Edición de varios nodos, texto y atributos

Para cambiar el nombre de etiqueta, el contenido de texto o los atributos de varios nodos a la vez, puede editar parte del DOM mediante el editor de texto HTML del árbol DOM, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, haga clic con el botón derecho en la sección Editar contenido, Nombre de etiqueta y Atributos y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, haga clic con el botón derecho en el <section id="edit-as-html-1"> nodo y, a continuación, seleccione Editar como HTML. El editor HTML aparece dentro del árbol DOM, con un cuadro alrededor de la sección que se está editando:

   

4. Escriba los cambios que desea realizar en el editor HTML, como:

   • Agregar, eliminar o editar atributos.
   • Agregar o eliminar nodos.
   • Editar el contenido de texto de los nodos o los nombres de etiquetas.

   Por ejemplo, agregue <p>Dijon</p> después de la <p>Marseille</p> línea.

5. Haga clic en el árbol DOM fuera del editor HTML o presione Ctrl+Entrar. Las modificaciones se aplican al árbol DOM y a la página web representada, y el editor HTML se cierra:

   

Reordenar nodos DOM

Para reordenar nodos en el árbol DOM, arrastre los nodos, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Reordenar nodos DOM, haga clic con el botón derecho en Elvis Presley y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, arrastre <p>Elvis Presley</p> hasta la parte superior de la lista:

   

Estado de fuerza

Puede forzar que los nodos permanezcan en estados como :active, :hover, :focus, :visitedy :focus-within, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Estado de fuerza, mantenga el puntero sobre El Señor de las Moscas. El color de fondo se convierte en naranja.

3. Haga clic con el botón derecho en El señor de las moscas y, a continuación, seleccione Inspeccionar.

4. Haga clic con el botón derecho en <p class="demo--hover">The Lord of the Flies</p>y, a continuación, seleccione Forzar estado>:mantener el puntero. Si no se muestra esa opción, consulte Apéndice: Opciones que faltan a continuación. El color de fondo sigue siendo naranja, aunque en realidad no mantenga el puntero sobre el nodo.

Ocultar un nodo

Presione H para ocultar un nodo, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Ocultar un nodo, haga clic con el botón derecho en The Stars My Destination (Mi destino de Stars ) y, a continuación, seleccione Inspeccionar.

3. Presione la tecla H . El nodo está oculto en la página web representada:

   

4. Vuelva a presionar la tecla H . El nodo se muestra de nuevo.

Eliminación de un nodo

Presione Eliminar para eliminar un nodo, como se indica a continuación:

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Eliminar un nodo, haga clic con el botón derecho en Fundación y, a continuación, seleccione Inspeccionar.

3. Presione Eliminar. Se elimina el nodo.

4. Presione Ctrl+Z (Windows, Linux) o Comando+Z (macOS). La última acción se deshace y vuelve a aparecer el nodo.

Acceso a nodos en la consola

DevTools proporciona algunos accesos directos para acceder a los nodos DOM desde la herramienta Consola o para obtener referencias de JavaScript a cada uno de ellos.

Haga referencia al nodo seleccionado actualmente con $0

Al inspeccionar un nodo, el == $0 texto situado junto al nodo significa que puede hacer referencia a este nodo en la consola con la variable $0.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Referencia al nodo seleccionado actualmente con $0, haga clic con el botón derecho en La mano izquierda de oscuridad y, a continuación, seleccione Inspeccionar.

3. Presione la tecla Esc para abrir la herramienta Consola en el panel Vista rápida .

4. Escriba $0 y presione Entrar. El resultado de la expresión muestra que $0 se evalúa como <p>The Left Hand of Darkness</p>:

   

5. Mantenga el puntero sobre el resultado. El nodo está resaltado en la ventanilla.

6. Haga clic <p>Dune</p> en el árbol DOM, vuelva a escribir $0 en la consola y presione Entrar de nuevo. Ahora, $0 se evalúa como <p>Dune</p>:

   

Almacenar como variable global

Si necesita volver a hacer referencia a un nodo muchas veces, almacénelo como una variable global.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Store as global variable (Almacenar como variable global), haga clic con el botón derecho en The Big Sleep (Suspensión grande) y, a continuación, seleccione Inspect (Inspeccionar).

3. Haga clic con el botón <p>The Big Sleep</p> derecho en el árbol DOM y, a continuación, seleccione Almacenar como variable global. Si no se muestra esa opción, consulteApéndice: Opciones que faltan a continuación.

4. Escriba temp1 en la consola y, a continuación, presione Entrar. El resultado de la expresión muestra que la variable se evalúa como el nodo:

   

Copia de la ruta de acceso de JS

Copie la ruta de acceso de JavaScript a un nodo cuando necesite hacer referencia a ella en una prueba automatizada.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Copiar ruta de acceso js, haga clic con el botón derecho en The Brothers Karamazov y, a continuación, seleccione Inspeccionar.

3. Haga clic con el botón <p>The Brothers Karamazov</p> derecho en el árbol DOM y, a continuación, seleccione Copiar>ruta de acceso de JS. Una document.querySelector() expresión que se resuelve en el nodo se ha copiado en el Portapapeles.

4. Presione Ctrl+V (Windows, Linux) o Comando+V (macOS) para pegar la expresión en la herramienta Consola .

5. Presione Entrar para evaluar la expresión. La expresión Copy JS Path se evalúa como el nodo:

   

Interrupción en los cambios de DOM

DevTools permite pausar el JavaScript de una página cuando JavaScript modifica el DOM.

Interrupción de las modificaciones de atributos

Use puntos de interrupción de modificación de atributos cuando desee pausar el JavaScript que hace que cambie cualquier atributo de un nodo.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Interrumpir las modificaciones de atributos, haga clic con el botón derecho en Sauerkraut y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, haga clic con el botón derecho en <p id="botm_target">Sauerkraut</p>y, a continuación, seleccione Interrumpir al>modificar atributos:

   

   Consulte Apéndice: Faltan opciones si no se muestra la opción.

4. Haga clic en el botón Establecer fondo . Esto establece el style atributo del nodo en background-color:thistle. DevTools pausa la página y resalta el código que hizo que el atributo cambiara en la herramienta Orígenes :

   

5. Haga clic en Reanudar script () para reanudar la ejecución de JavaScript.

Interrupción en la eliminación de nodos

Si desea pausar cuando se quita un nodo determinado, use puntos de interrupción de eliminación de nodos.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Interrumpir en la eliminación de nodos, haga clic con el botón derecho en Neuromancer y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, haga clic con el botón derecho en <p id="target">Neuromancer</p>y, a continuación, seleccione Interrumpir al>quitar el nodo. Consulte Apéndice: Faltan opciones si no se muestra la opción.

4. Haga clic en el botón Eliminar anterior. DevTools pausa la página y resalta el código que provocó que se quitara el nodo.

5. Seleccione Reanudar script ().

Interrupción de las modificaciones del subárbol

Después de colocar un punto de interrupción de modificación de subárbol en un nodo, DevTools pausa la página cuando se agrega o quita cualquiera de los descendientes del nodo.

1. Abra la página de demostración Ejemplos DOM en una nueva ventana o pestaña.

2. En la página web representada, en Interrumpir las modificaciones del subárbol, haga clic con el botón derecho en A Fire On The Deep (Activar en profundidad ) y, a continuación, seleccione Inspeccionar.

3. En el árbol DOM, haga clic con el botón derecho en <div id="ul_target">, que es el nodo anterior <p>A Fire Upon the Deep</p>y, a continuación, seleccione Interrumpir al>modificar subárbol. Si el comando Modificaciones de subárbol no aparece, consulte Apéndice: Opciones que faltan.

4. Haga clic en Agregar elemento secundario. El código se pausa porque se agregó un <p> nodo a la lista.

5. Seleccione Reanudar script ().

Pasos siguientes

Que cubre la mayoría de las características relacionadas con DOM en DevTools. Puede detectar el resto de las características haciendo clic con el botón derecho en los nodos del árbol DOM y experimentando con las otras opciones que no se trataron en este tutorial. Consulte también Métodos abreviados de teclado de la herramienta Elementos.

Consulta Información general de DevTools para descubrir todo lo demás que puedes hacer con DevTools.

Apéndice: HTML frente al DOM

En esta sección se explica la diferencia entre HTML y DOM.

Cuando se usa un explorador web para solicitar una página, el servidor devuelve código 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>

A continuación, el explorador analiza el código HTML y crea un árbol de objetos basado en el CÓDIGO HTML de la siguiente manera:

html
    head
        title
    body
        h1
        p
        script

Este árbol de objetos o nodos que representan el contenido de la página se denomina Modelo de objetos de documento (DOM). En este momento, el árbol DOM tiene el mismo aspecto que el código HTML, pero suponga que el script al que se hace referencia en la parte inferior del código HTML ejecuta el código siguiente:

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 h1 nodo y agrega otro p nodo al DOM. El DOM completo ahora tiene este 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 de la página actual. Cuando JavaScript agrega, quita o edita nodos, el DOM pasa a ser diferente del HTML.

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

Apéndice: Opciones que faltan

Muchas de las instrucciones de este tutorial le indican que haga clic con el botón derecho en un nodo del árbol DOM y, a continuación, seleccione una opción en el menú contextual que aparece. Si la opción especificada no aparece en el menú contextual, haga clic con el botón derecho fuera del texto del nodo o haga clic en el ... botón situado a la izquierda del nodo:

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.