Introducción a la visualización y cambio del DOM

Complete estos tutoriales interactivos para aprender los conceptos básicos de ver y cambiar el modelo de objetos de documento (DOM) de una página mediante Microsoft Edge DevTools.

En este tutorial se supone que conoce la diferencia entre DOM y HTML. Vaya a Apéndice: HTML frente al DOM para obtener una explicación.

Ejemplos de OPEN DOM

1. Mantenga Control presionado (Windows, Linux) o Command (macOS) y elija Ejemplos de DOM para abrir en una nueva pestaña.

   Ejemplos de DOM

Ver nodos DOM

El árbol DOM del panel Elementos es donde se hacen todas las actividades relacionadas con DOM en DevTools.

Inspeccionar un nodo

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

1. Abra ejemplos de DOM.

2. En Inspeccionar un nodo, elija Miguel Ángel con el botón secundario y elija Inspeccionar.

   

   Inspeccionar un nodo

   1. Se abre la herramienta Elementos de DevTools. <li>Michelangelo</li> se resalta en el árbol DOM.

      

      Resaltar el Michelangelo nodo

      1. Elija el icono Inspeccionar ( Inspeccionar ) en la esquina superior izquierda DevTools.

         

         El icono Inspeccionar

3. En Inspeccionar un nodo, elija el texto de Tokio. Ahora, <li>Tokyo</li> se resalta en el árbol DOM.

Inspeccionar un nodo también es el primer paso para ver y cambiar los estilos de un nodo. Vaya a Introducción con ver y cambiar 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 ejemplos de DOM.

2. En Navegar por el árbol DOM con un teclado, elija Anillo con el botón derecho y elija Inspeccionar. <li>Ringo</li> se selecciona en el árbol DOM.

   

   Inspeccionar el Ringo nodo

   1. Seleccione la Up tecla de flecha 2 veces. <ul> .

      

      Inspeccionar el ul nodo

   2. Seleccione la Left tecla de flecha. La <ul> lista se contrae.

   3. Vuelva a Left seleccionar la tecla de flecha. Se selecciona el elemento <ul> primario del nodo. En este caso, es el <div> con el identificador navigate-the-dom-tree-with-a-keyboard-1 .

   4. Seleccione la tecla de flecha 2 veces para volver a seleccionar Down la lista que acaba de <ul> contraer. Debe tener el siguiente aspecto: <ul>... </ul>

   5. Seleccione la Right tecla de flecha. La lista se expande.

Desplazarse a la vista

Al ver el árbol DOM, es posible que te interese un nodo DOM que no esté actualmente en la ventanilla. Por ejemplo, supongamos que se desplazó hasta la parte inferior de la página y que le interesa el nodo situado en <h1> 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 revisar el nodo.

1. Abra ejemplos de DOM.

2. En Desplazarse a la vista, elija Magritte con el botón derecho y elija Inspeccionar.

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

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

5. Mantenga el mouse en el nodo, abra el menú contextual (haga clic con el <li>Magritte</li> botón secundario) y elija Desplazarse a la vista. La ventanilla se desplaza hacia arriba para que pueda revisar el nodo Magritte. Vaya a Apéndice: faltan opciones si no puede revisar la opción Desplazarse a la vista.

   

   Desplazarse a la vista

Buscar nodos

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

1. Centra el cursor en la herramienta Elementos.

2. Seleccione Control + F (Windows, Linux) o Command + F (macOS). La barra de búsqueda se abre en la parte inferior del árbol DOM.

3. Escriba The Moon is a Harsh Mistress. La última oración se resalta en el árbol DOM.

   

   Resaltar la consulta en la barra de búsqueda

Como se mencionó anteriormente, la barra de búsqueda también admite selectores CSS y XPath.

Edición del DOM

Puede editar el DOM al instante y revisar cómo afectan los cambios a la página.

Editar contenido

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

1. Abra ejemplos de DOM.
2. En Editar contenido, elija Michelle con el botón derecho y elija Inspeccionar.

   1. En el árbol DOM, haga doble clic en Michelle . En otras palabras, haga doble clic en el texto entre <li> y </li> . El texto se resalta para indicar que está seleccionado.

      

      Editar el texto

   2. Eliminar Michelle , escriba Leela y, a continuación, Enter seleccione para confirmar el cambio. El texto del DOM cambia de Michelle a Leela.

Editar atributos

Para editar atributos, haga doble clic en el nombre o el valor del atributo. Siga las instrucciones para obtener información sobre cómo agregar atributos a un nodo.

1. Abra ejemplos de DOM.

2. En Editar atributos, elija Howard con el botón derecho y elija Inspeccionar.

3. Haga doble clic <li> en . El texto se resalta para indicar que el nodo está seleccionado.

   

   Editar el nodo

4. Seleccione la Right tecla de flecha, agregue un espacio, escriba y, a style="background-color:gold" continuación, seleccione Enter . El color de fondo del nodo cambia a oro.

   

   Agregar un style atributo al nodo

Editar tipo de nodo

Para editar el tipo de un nodo, haga doble clic en el tipo y, a continuación, escriba el nuevo tipo.

1. Abra ejemplos de DOM.
2. En Editar tipo de nodo, elija Hank con el botón secundario y elija Inspeccionar.

   1. Haga doble clic <li> en . El texto li está resaltado.

   2. Eliminar li , escribir button y, a continuación, seleccionar Enter . El <li> nodo cambia a un <button> nodo.

      

      Cambiar el tipo de nodo a button

Reordenar nodos DOM

Arrastre nodos para volver a ordenarlos.

1. Abra ejemplos de DOM.

2. En Reordenar nodos DOM, elija Elvis Presley con el botón derecho y elija Inspeccionar.

   Nota

   Es el último elemento de la lista.

   1. En el árbol DOM, arrastre <li>Elvis Presley</li> hasta la parte superior de la lista.

      

      Arrastre el nodo a la parte superior de la lista

Estado de fuerza

Puede forzar a los nodos a permanecer en estados como :active , , , y :hover :focus :visited :focus-within .

1. Abra ejemplos de DOM.
2. En Estado de fuerza, mantenga el mouse en El señor de las moscas. El color de fondo se convierte en naranja.
   1. Mantenga el mouse en El señor de las moscas, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.
   2. Mantenga el <li class="demo--hover">The Lord of the Flies</li> mouse sobre , abra el menú contextual (haga clic con el botón secundario) y elija Forzar estado > :hover. Vaya a Apéndice: faltan opciones si no se muestra la opción. El color de fondo permanece naranja aunque no se mantenga el puntero sobre el nodo.

Ocultar un nodo

Seleccione H para ocultar un nodo.

1. Abra ejemplos de DOM.
2. En Ocultar un nodo, elija Las estrellas mi destino y elija Inspeccionar.

   1. Seleccione la H clave. El nodo está oculto.

      

      Cómo es el nodo en el árbol DOM después de que esté oculto

   2. Vuelva a H seleccionar la clave. El nodo se muestra de nuevo.

Eliminación de un nodo

Seleccione Delete para eliminar un nodo.

1. Abra ejemplos de DOM.
2. En Eliminar un nodo, elija Foundation con el botón secundario y elija Inspeccionar.
   1. Seleccione la Delete clave. El nodo se elimina.
   2. Seleccione Control + Z (Windows, Linux) o Command + Z (macOS). La última acción es deshacer y el nodo vuelve a aparecer.

Nodos de acceso en la consola

DevTools proporciona algunos accesos directos para obtener acceso a los nodos DOM desde la consola o para obtener referencias de JavaScript a cada uno.

Hacer referencia al nodo seleccionado actualmente con $0

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

1. Abra ejemplos de DOM.
2. En Referencia al nodo seleccionado actualmente con $0, elija La mano izquierda de la oscuridad y elija Inspeccionar.

   1. Seleccione la Escape tecla para abrir el cajón de consola.

   2. Escriba $0 y seleccione la Enter clave. 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 `$0` expresión de la **consola**
      

   3. Mantenga el mouse sobre el resultado. El nodo se resalta en la ventanilla.

   4. Elija en el árbol DOM, escriba de nuevo en la consola y, a <li>Dune</li> $0 continuación, vuelva a Enter seleccionar. Ahora, $0 se evalúa como <li>Dune</li> .

      

      El resultado de la segunda $0 expresión en la consola

Almacenar como variable global

Si necesita volver a hacer referencia a un nodo muchas veces, guárdalo como una variable global.

1. Abra ejemplos de DOM.
2. En Store como variable global, mantenga el mouse en El granreposo , abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

   1. Mantenga el <li>The Big Sleep</li> mouse en el árbol DOM, abra el menú contextual (haga clic con el botón secundario) y elija Almacenar como variable global. Vaya a Apéndice: faltan opciones si no se muestra la opción.

   2. Escriba temp1 la consola y, a continuación, seleccione Enter . El resultado de la expresión muestra que la variable evalúa el nodo.

      

      El resultado de la temp1 expresión

Copiar ruta de acceso DE JS

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

1. Abra ejemplos de DOM.
2. En Copiar ruta de acceso JS, mantenga el mouse en Los hermanos Karamazov, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

   1. Mantenga el mouse en el árbol DOM, abra el menú contextual (haga clic con el botón secundario) y <li>The Brothers Karamazov</li> elija Copiar rutade acceso js > de copia. Una document.querySelector() expresión que se resuelve en el nodo se ha copiado en el portapapeles.

   2. Seleccione Control + V (Windows, Linux) o Command + V (macOS) para pegar la expresión en la consola.

   3. Seleccione Enter esta opción para evaluar la expresión.

      

      El resultado de la expresión Copy JS Path

Interrupción de los cambios dom

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

Interrupción en las modificaciones de atributos

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

1. Abra ejemplos de DOM.
2. En Interrumpir las modificaciones de atributo, elija Sauerkraut con el botón derecho y elija Inspeccionar.

   1. En el árbol DOM, mantenga el mouse sobre , abra el menú contextual (haga clic con el botón secundario) y <li id="target">Sauerkraut</li> elija Interrumpir modificaciones de > atributo. Vaya a Apéndice: faltan opciones si no se muestra la opción.

      

      Interrupción en las modificaciones de atributos

   2. En el siguiente paso, se le indicará que elija un botón que detenga el código de la página. Después de pausar la página, ya no podrá desplazarse por la página. Debe elegir Reanudar script ( Reanudar script ) para que la página se pueda desplazar de nuevo.

      

      Dónde reanudar la ejecución de scripts

   3. Elija el botón Establecer fondo anterior. 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.

   4. Elija Resume Script ( Resume Script ), como se mencionó anteriormente.

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 ejemplos de DOM.
2. En Interrumpir la eliminación de nodos, elija Neuromancer con el botón secundario y elija Inspeccionar.
   1. En el árbol DOM, mantenga el mouse sobre , abra el menú contextual (haga clic con el botón secundario) y <li id="target">Neuromancer</li> elija Interrumpir al quitar > nodo. Vaya a Apéndice: faltan opciones si no se muestra la opción.
   2. Elija el botón Eliminar anterior. DevTools pausa la página y resalta el código que hizo que se quitara el nodo.
   3. Elija Resume Script ( Resume 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 ejemplos de DOM.
2. En Interrumpir las modificaciones del subárbol, elija A Fire Upon The Deep y elija Inspect.
   1. En el árbol DOM, mantenga el mouse sobre , que es el nodo anterior, abra el menú contextual (haga clic con el botón secundario) y elija <ul id="target"> <li>A Fire Upon the Deep</li> Interrumpir almodificar > el subárbol. Si no se muestra la opción, vaya a Apéndice: Falta opciones.
   2. Elija Agregar elementosecundario . El código se detiene porque se <li> agregó un nodo a la lista.
   3. Elija Resume Script ( Resume Script ).

Pasos siguientes

Eso cubre la mayoría de las características relacionadas con DOM en DevTools. Para descubrir el resto de las características, mantenga el mouse en los nodos del árbol DOM, abra el menú contextual (haga clic con el botón secundario) y experimente con las otras opciones que no se han cubierto en este tutorial. Vaya a Métodos abreviados de teclado del panel Elementos.

Echa un vistazo a Microsoft Edge página principal de DevTools para descubrir todo lo que puedes hacer con DevTools.

Apéndice: HTML frente al DOM

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

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

html
head
title
body
h1
p
script

Este árbol de objetos o nodos que representa el contenido de la página se denomina DOM.

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

html
head
title
body
p
script
p

El CÓDIGO HTML de la página ahora es diferente del 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 convierte en diferente que el HTML.

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

Apéndice: Desplazarse a la vista

Esta es una continuación de la sección Desplazarse a la vista. Siga las instrucciones siguientes para completar la sección.

1. El <li>Magritte</li> nodo todavía debe estar seleccionado en el árbol DOM. Si no es así, vuelva a Desplazarse a la vista y vuelva a empezar.

2. Mantenga el mouse en el nodo, abra el menú contextual (haga clic con el <li>Magritte</li> botón secundario) y elija Desplazarse a la vista. La ventanilla se desplaza hacia arriba para que se muestre el nodo Magritte. Si no se muestra la opción Desplazarse a la vista, vaya a Apéndice: Falta opciones.

   

   Desplazarse a la vista

   -->

Apéndice: Faltan opciones

Muchas de las instrucciones de este tutorial le indican que mantenga el mouse en un nodo del árbol DOM, abra el menú contextual (haga clic con el botón secundario) y, a continuación, elija una opción en el menú contextual que aparece. Si no se muestra la opción especificada en el menú contextual, intente alejarse del texto del nodo y abrir el menú contextual (haga clic con el botón secundario).

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.