Interactuar con el DOM mediante la Consola

La herramienta Consola es una forma excelente de interactuar con la página web en el explorador. En DevTools, normalmente se interactúa con el DOM mediante la herramienta Inspeccionar para seleccionar elementos y mediante la herramienta Elementos para modificar el DOM, por ejemplo, para agregar o cambiar atributos o estilos de elementos.

La herramienta Consola también se puede usar para interactuar con el DOM mediante código JavaScript. Por ejemplo, puede buscar elementos en el árbol del DOM y manipularlos mediante las API del DOM.

Para obtener más información sobre la herramienta Inspeccionar , consulte Analizar páginas con la herramienta Inspeccionar. Para obtener más información sobre la herramienta Elementos , consulte Inspección, edición y depuración de HTML y CSS con la herramienta Elementos.

Buscar un elemento en el árbol del DOM

Para buscar un elemento en el árbol DOM desde la herramienta Consola :

  1. Vaya a la página web que desee inspeccionar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Escriba o pegue el código siguiente en la consola y, a continuación, presione Entrar.

    document.querySelector('main');

    El <main> elemento del árbol DOM se muestra en la consola:

    La herramienta Consola de DevTools, que muestra la expresión document.querySelector y el elemento principal resultante

  4. En la Consola, mantenga el puntero sobre el elemento HTML <main> resultante o pulse Mayús+Tab. En la página web representada, DevTools resalta el elemento correspondiente <main> :

    El elemento principal, resaltado en la página web representada

Cambiar el DOM de la página web

Puede realizar cambios en el árbol DOM de la página web desde la herramienta Consola . En este ejemplo, establece el valor de un atributo de elemento DOM mediante la Consola para afectar al estilo del elemento: agrega un fondo gris al <h1> título de la página.

  1. Vaya a la página web que quiera cambiar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Pegue el siguiente código en la consola:

    document.querySelector("h1").style.backgroundColor = "lightgrey";

    Aparece un fondo gris detrás del título de la página:

    La herramienta Consola, que muestra el código JavaScript anterior, y la página web que muestra el título gris

Obtener una referencia a un elemento

En una página web compleja, puede ser difícil encontrar el elemento adecuado para cambiar. Pero puede usar la herramienta Inspeccionar para ayudarle. Suponga que desea cambiar el texto del primer vínculo dentro del elemento Sección 1 de la página representada:

El vínculo que desea cambiar en la página

Para obtener una referencia al elemento de vínculo que desea cambiar:

  1. Vaya a la página web que desee inspeccionar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Haga clic en la herramienta Inspeccionar (icono de la herramienta Inspeccionar) y, a continuación, en la página web representada, mantenga el puntero sobre un vínculo, como Vínculo 1:

    Al mantener el puntero sobre un vínculo al usar la herramienta Inspeccionar, el vínculo se resalta

  4. Haga clic en el vínculo mantenido en la página web representada. DevTools abre la herramienta Elementos , con el elemento correspondiente seleccionado:

    La herramienta Elementos de DevTools, con el elemento de vínculo seleccionado

  5. Haga clic en el ... botón situado junto al elemento en el árbol DOM y, a continuación, seleccione Copiar>Copiar ruta de acceso de JS:

    El elemento de menú Copiar ruta de acceso de JS en la herramienta Elementos

    Esta es la ruta de acceso de JS que copió:

    document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a")

    La ruta anterior es un selector CSS que apunta al elemento de vínculo que seleccionó mediante la herramienta Inspeccionar .

  6. En la Consola, pegue la ruta de JavaScript que copió, pero no pulse Entrar todavía.

  7. Cambie el texto del vínculo a Updated link. Para ello, agregue .textContent = "Updated link" a la ruta de JavaScript que pegó anteriormente:

    La herramienta Consola, con la ruta de acceso JS y la expresión textContent, y la página web, que muestra el texto del vínculo actualizado

Use las API DOM en las que desee cambiar el árbol DOM en la Consola. Para hacerlo más cómodo, la consola viene con algunos métodos de utilidad auxiliar.

Funciones útiles de utilidad de consola

Muchos métodos prácticos y accesos directos están disponibles como funciones de utilidad en la herramienta Consola . Algunas de estas funciones de utilidad son muy útiles para interactuar con el árbol DOM de una página web, y se describen a continuación. Para obtener más información, consulte Funciones y selectores de utilidad de herramienta de consola.

Obtener elementos con las funciones $ y los métodos abreviados

El $ carácter tiene un significado especial en la herramienta Consola :

  • Las $() funciones y $$() son versiones más cortas de las document.querySelector() funciones and document.querySelectorAll() .

  • $0, $1, $2, $3, y $4 son accesos directos a elementos que ha seleccionado recientemente en la herramienta Elementos . $0 es siempre el elemento seleccionado más recientemente. Por lo tanto, en el ejemplo anterior Obtener una referencia a un elemento, una vez que haya seleccionado el elemento mediante la herramienta Inspeccionar , puede cambiar su texto para $0.textContent = "Updated link" obtener el mismo efecto.

  • $x() permite seleccionar elementos DOM mediante XPath.

Obtener todos los vínculos de la página

En este ejemplo, usa la $$() función de utilidad para enumerar todos los vínculos de la página web. Luego usa esa función junto con el método de filter() matriz para deshacerse de los enlaces que no comienzan ( https como los enlaces de anclaje en la presente página web), con el fin de filtrar la lista para incluir solo enlaces externos.

  1. Vaya a la página web de la que desea obtener los vínculos. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Para obtener la lista de todos los vínculos de la página, escriba el código siguiente en la Consola y, a continuación, presione Entrar:

    $$('a');

    El resultado de la función $$('a') en la Consola, que es una matriz de elementos

    $$('a') es la abreviatura de document.querySelectorAll('a').

  4. Expanda la lista de vínculos que se registra en la consola y, a continuación, expanda el primer objeto de vínculo. Se muestran las propiedades del vínculo:

    Al expandir el primer elemento de la matriz, se muestran sus propiedades

  5. Para reducir la cantidad de información devuelta por la $$() función, utilice el map() método de matriz. El map() método funciona porque la $$() función devuelve una matriz.

    $$('a').map(a => {
  return {url: a.getAttribute("href"), text: a.innerText}
});

    El código anterior devuelve una matriz de todos los vínculos, donde cada objeto de vínculo se asigna a un objeto JavaScript con las url propiedades and text .

  6. Expanda algunos de los objetos de vínculo devueltos para ver sus propiedades:

    La lista de vínculos de la página, con el texto de cada vínculo y el atributo href

  7. Para enumerar solo vínculos externos, use el filter() método de matriz para deshacerse de los vínculos que no comienzan con https:

    $$('a').map(a => {
   return {url: a.getAttribute("href"), text: a.innerText}
}).filter(a => {
   return a.url.startsWith("https");
});

    La lista de enlaces externos en la página

Mostrar elementos DOM en una tabla

En el ejemplo anterior, ha mostrado una lista de elementos de la página en la Consola. Los elementos se muestran como una matriz de JavaScript. Para facilitar el uso de la lista de elementos en la Consola, puede mostrarlos en una tabla ordenable en su lugar, utilizando la console.table() función de utilidad:

  1. Vaya a la página web que desee inspeccionar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Pegue el siguiente código en la consola y, a continuación, presione Entrar:

    console.table($$('img'), ['src','alt'])

    La lista de elementos de la página web se muestra en la Consola, con formato de <img> tabla, con los atributos y alt las src imágenes como columnas:

    La herramienta de consola, que muestra la función console.table() y una tabla con una lista de todas las imágenes

Obtener todos los encabezados de página y las URL de delimitador

En este ejemplo, obtiene todos los títulos de la página web que tienen un id atributo y genera una dirección URL que apunta a cada título.

  1. Vaya a la página web que desee inspeccionar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Copie y pegue el siguiente código en la consola y, a continuación, presione Entrar:

    let headings = $$('main [id]').filter(el => {
  return el.nodeName.startsWith('H');
}).map(el => {
  return `${el.innerText}: ${document.location.href}#${el.id}\n`;
});
console.log(headings.join("\n"));

    El resultado es un texto que contiene el contenido de cada título de sección, seguido de la dirección URL completa del título de sección:

    La herramienta Consola, que muestra la lista de todos los títulos de la página, junto con sus direcciones URL

Copiar información desde la Consola

En los ejemplos anteriores, generó listas de elementos y cadenas de información. Puede resultar útil copiar la información generada desde la Consola y pegarla en otro lugar.

Para copiar el valor de retorno de una expresión que ejecute en la Consola, utilice la función de copy() utilidad:

  1. Vaya a la página web de la que desea extraer información. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Para copiar la lista de todas las direcciones URL de imagen de la página, escribe el código siguiente en la consola y, a continuación, presiona Entrar:

    copy($$('img').map(img => img.src).join("\n"));

    La copy() función de utilidad puede tomar cualquier argumento que se pueda convertir en una cadena y copiarlo en el portapapeles. En este ejemplo, el argumento es una cadena que contiene todas las direcciones URL de imagen de la página, separadas por una nueva línea.

  4. Abra un editor de texto, como Visual Studio Code, y, a continuación, pegue las direcciones URL de imagen copiadas en el editor:

    La lista de direcciones URL de imagen en un editor de texto

Borrar la consola

Cuando se ejecuta código en la consola, a menudo se termina con muchas instrucciones de entrada y resultados de salida que ya no es necesario mostrar. Puedes borrar la Consola mediante la función declear() utilidad.

Enumerar los detectores de eventos asignados a un elemento

Para enumerar todos los escuchas de eventos asignados a un elemento, use la función de getEventListeners() utilidad:

  1. Vaya a la página web que desee inspeccionar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Haga clic en la herramienta Inspeccionar y, a continuación, en la página web representada, haga clic en una de las imágenes para seleccionarla. Se muestra la herramienta Elementos y el elemento de imagen seleccionado se resalta en el árbol DOM:

    La herramienta Elementos, con el elemento de imagen seleccionado

  4. Abra la herramienta Consola , escriba el código siguiente y presione Entrar:

    getEventListeners($0);

    En el fragmento de código anterior, $0 es un acceso directo al elemento seleccionado <img> actualmente en la herramienta Elementos . La getEventListeners() función de utilidad devuelve un objeto que contiene todos los detectores de eventos asignados a la imagen.

  5. Expanda el objeto y, a continuación, expanda el único detector de eventos de la lista para ver las propiedades del agente de escucha. La listener propiedad muestra el nombre de la función a la que se llama cuando se desencadena el evento (en este ejemplo, showImage):

    El objeto expandido, que muestra la propiedad de escucha

Supervisar eventos desencadenados en la página

Los sitios web que usan JavaScript reaccionan a menudo a los eventos de usuario que ocurren en el explorador. Puede ser difícil realizar un seguimiento de todos los eventos desencadenados por el explorador. La monitorEvents() función de utilidad permite supervisar los eventos que se desencadenan en la página web.

Supervisar todos los eventos de un elemento

Para iniciar la supervisión de eventos:

  1. Vaya a la página web que desee supervisar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Para empezar a supervisar los eventos activados en un elemento, por ejemplo, en uno de los <img> elementos, escriba el código siguiente en la consola y, a continuación, presione Entrar:

    monitorEvents(document.querySelector('img'));

    El código anterior supervisa todos los eventos que se activan en el primer <img> elemento de la página.

  4. En la página web representada, mueva el puntero sobre la imagen y mueva el mouse o tabulador a la imagen con el teclado. Eventos como mouseover, mousemove, y focus se registran en la Consola:

    La herramienta Consola, que muestra la lista de todos los eventos de ratón que se activan en la imagen

Cuando supervisa eventos, obtendrá registros en la Consola cada vez que el explorador active un evento. Esto puede provocar mucho ruido en la consola. También puede supervisar eventos específicos en un elemento.

Supervisar eventos específicos en un elemento

Para empezar a supervisar eventos específicos en un elemento:

  1. Vaya a la página web que desee supervisar. Por ejemplo, abra la página de demostración de interacciones DOM de la herramienta DevTools Console en una pestaña o ventana nueva.

  2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

  3. Para iniciar la supervisión solo de los eventos mousedown, mouseup y click que se activan en el primer <img> elemento de la página, escriba el código siguiente en la consola y, a continuación, presione Entrar:

    monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);

  4. En la página web representada, haga clic en la primera imagen. mousedown, mouseupy click los eventos se registran en la Consola:

    La herramienta Consola, que muestra la lista de eventos de ratón que se activan en la imagen

Supervisar eventos en la ventana

Para recibir una notificación en la Consola cada vez que se desplace o cambie el tamaño de la ventana:

  1. Pegue el siguiente código en la consola:

    monitorEvents(window, ['resize', 'scroll']);

  2. Desplácese por la página y cambie el tamaño de la ventana del explorador. La Consola registra los eventos que se desencadenan:

    La herramienta Consola, que muestra la lista de eventos de cambio de tamaño y desplazamiento

Detener eventos de supervisión

Mientras se supervisan los eventos en el DOM, la consola puede hacer ruido. Para detener la supervisión de eventos, utilice la función de unmonitorEvents() utilidad:

unmonitorEvents(document.querySelector('img'));
unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
unmonitorEvents(window, ['resize', 'scroll']);

Guardar scripts de interacción DOM como fragmentos de código

Si introduces el mismo código de interacción DOM repetidamente en la consola, considera la posibilidad de guardar el código como un fragmento y ejecutarlo. Los fragmentos de código se guardan en la herramienta Orígenes y puede ejecutarlos desde allí o desde el menú de comandos. Para obtener más información, consulta Ejecutar fragmentos de código de JavaScript en cualquier página web.

Vea también

  • Se actualizó por última vez el