Взаимодействие с DOM с помощью консоли

  • Статья

Средство "Консоль" — это отличный способ взаимодействия с веб-страницей в браузере. В средствах разработки вы обычно взаимодействуете с DOM с помощью средства "Проверка " для выбора элементов и с помощью средства "Элементы" для изменения модели DOM, например для добавления или изменения атрибутов или стилей элементов.

Средство Console также можно использовать для взаимодействия с DOM с помощью кода JavaScript. Например, можно найти элементы в дереве DOM и управлять ими с помощью API DOM.

Дополнительные сведения о средстве проверки см. в статье Анализ страниц с помощью средства проверки. Дополнительные сведения о средстве Elements см. в статье Проверка, изменение и отладка HTML и CSS с помощью средства Elements.

Поиск элемента в дереве DOM

Чтобы найти элемент в дереве DOM из средства Консоли , выполните следующие действия:

  1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Введите или вставьте следующий код в консоль и нажмите клавишу ВВОД.

    document.querySelector('main');

    Элемент <main> из дерева DOM отображается в консоли:

    Средство Консоли DevTools, показывающее выражение document.querySelector и результирующий элемент main

  4. В консоли наведите указатель мыши на результирующий HTML-элемент <main> или нажмите клавиши SHIFT+TAB. На отображаемой веб-странице DevTools выделяет соответствующий <main> элемент:

    Элемент main, выделенный на отображаемой веб-странице

Изменение модели DOM веб-страницы

Вы можете внести изменения в дерево DOM веб-страницы с помощью средства Консоли . В этом примере вы задали значение атрибута элемента DOM с помощью консоли, чтобы повлиять на стили элемента: вы добавляете серый фон к <h1> заголовку страницы.

  1. Перейдите на веб-страницу, которую вы хотите изменить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Вставьте следующий код в консоль:

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

    За заголовком страницы отображается серый фон:

    Средство

Получение ссылки на элемент

На сложной веб-странице может быть трудно найти нужный элемент для изменения. Но вы можете использовать средство проверки , чтобы помочь вам. Предположим, вы хотите изменить текст первой ссылки в элементе Section 1 отображаемой страницы:

Ссылка, которую вы хотите изменить на странице

Чтобы получить ссылку на элемент link, который требуется изменить, выполните следующие действия:

  1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Щелкните инструмент Проверка (значок средства проверки), а затем на отображаемой веб-странице наведите указатель мыши на ссылку, например Ссылку 1:

    При наведении указателя мыши на ссылку при использовании средства проверки ссылка выделяется.

  4. Щелкните ссылку с наведенным курсором на отрисованную веб-страницу. DevTools открывает инструмент Элементы с выбранным соответствующим элементом:

    Инструмент

  5. Нажмите кнопку ... рядом с элементом в дереве DOM и выберите Копировать>путь JS:

    Пункт меню

    Ниже приведен путь JS, который вы скопировали:

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

    Приведенный выше путь представляет собой селектор CSS, указывающий на элемент link, выбранный с помощью средства проверки .

  6. В консоли вставьте скопированный путь к JavaScript, но пока не нажимайте клавишу ВВОД .

  7. Измените текст ссылки Updated linkна . Для этого добавьте .textContent = "Updated link" в путь JavaScript, который вы вставили ранее:

    Средство

Используйте все API-интерфейсы DOM, которые нужно изменить в дереве DOM в консоли. Чтобы сделать его более удобным, консоль поставляется с несколькими вспомогательными служебными методами.

Полезные служебные функции консоли

Многие удобные методы и сочетания клавиш доступны в качестве служебных функций в средстве консоли . Некоторые из этих служебных функций очень полезны для взаимодействия с деревом DOM веб-страницы и описаны ниже. Дополнительные сведения см. в разделе Функции и селекторы средств консоли.

Получение элементов с помощью функций и сочетаний клавиш $

Символ $ имеет особое значение в средстве Консоли :

  • Функции $() и $$() являются более короткими версиями document.querySelector() функций и document.querySelectorAll() .

  • $0, $1, $2, $3и $4 — это сочетания клавиш для элементов, которые вы недавно выбрали в инструменте Элементы . $0 всегда является последним выбранным элементом. Таким образом, в предыдущем примере Получение ссылки на элемент после выбора элемента с помощью средства "Проверка " можно изменить его текст с помощью $0.textContent = "Updated link" того же эффекта.

  • $x() позволяет выбрать элементы DOM с помощью XPath.

Получение всех ссылок со страницы

В этом примере вы используете служебную $$() функцию для вывода списка всех ссылок на веб-странице. Затем вы используете эту функцию вместе с методом filter() массива, чтобы избавиться от ссылок, которые не начинаются с https (например, ссылок привязки на текущей веб-странице), чтобы отфильтровать список, чтобы включить только внешние ссылки.

  1. Перейдите на веб-страницу, с которой вы хотите получить ссылки. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Чтобы получить список всех ссылок на странице, введите следующий код в консоли и нажмите клавишу ВВОД:

    $$('a');

    Результат функции $$('a') в консоли, которая представляет собой массив элементов

    $$('a') является сокращением от document.querySelectorAll('a').

  4. Разверните список ссылок, зарегистрированных в консоли, а затем разверните первый объект ссылки. Отображаются свойства ссылки:

    При расширении первого элемента в массиве отображаются его свойства

  5. Чтобы уменьшить объем информации, возвращаемой функцией $$() , используйте map() метод array. Метод map() работает, так как $$() функция возвращает массив.

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

    Приведенный выше код возвращает массив всех ссылок, где каждый объект ссылки сопоставляется с объектами url JavaScript со свойствами и text .

  6. Разверните несколько возвращаемых объектов ссылки, чтобы увидеть их свойства:

    Список ссылок на странице с текстом и атрибутом href каждой ссылки

  7. Чтобы вывести список только внешних ссылок, используйте filter() метод массива, чтобы избавиться от ссылок, которые не начинаются с https:

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

    Список внешних ссылок на странице

Отображение элементов DOM в таблице

В предыдущем примере вы отображали список элементов со страницы в консоли. Элементы отображаются в виде массива JavaScript. Чтобы упростить использование списка элементов консоли, их можно отобразить в сортируемой таблице с помощью служебной console.table() функции:

  1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Вставьте следующий код в консоль и нажмите клавишу ВВОД:

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

    Список <img> элементов на веб-странице отображается в консоли в виде таблицы, а атрибуты каждого изображения src и alt в виде столбцов:

    Консольное средство, отображающее функцию console.table() и таблицу со списком всех изображений

Получение всех заголовков страниц и URL-адресов привязки

В этом примере вы получите все заголовки веб-страницы с атрибутом id и создаете URL-адрес, указывающий на каждый заголовок.

  1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Скопируйте и вставьте следующий код в консоль и нажмите клавишу ВВОД:

    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"));

    Результатом будет текст, содержащий содержимое для каждого заголовка раздела, за которым следует полный URL-адрес заголовка раздела:

    Средство

Копирование сведений из консоли

В предыдущих примерах вы создали списки элементов и строк информации. Можно скопировать созданные сведения из консоли и вставить их в другое место.

Чтобы скопировать возвращаемое значение из выражения, выполняемого в консоли, используйте служебную copy() функцию:

  1. Перейдите на веб-страницу, с которой вы хотите извлечь некоторые сведения. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Чтобы скопировать список всех URL-адресов изображений на странице, введите следующий код в консоли и нажмите клавишу ВВОД:

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

    Служебная copy() функция может принимать любой аргумент, который можно преобразовать в строку, и копировать его в буфер обмена. В этом примере аргумент представляет собой строку, содержащую все URL-адреса изображений на странице, разделенные новой строкой.

  4. Откройте текстовый редактор, например Visual Studio Code, а затем вставьте URL-адреса скопированного изображения в редактор:

    Список URL-адресов изображений в текстовом редакторе

Очистка консоли

При выполнении кода в консоли часто возникает много входных инструкций и выходных результатов, которые больше не нужно отображать. Консоль можно очистить с помощью служебной clear() функции.

Вывод списка прослушивателей событий, назначенных элементу

Чтобы получить список всех прослушивателей событий, назначенных элементу, используйте служебную getEventListeners() функцию:

  1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Щелкните средство "Проверка ", а затем на отображаемой веб-странице щелкните одно из изображений, чтобы выбрать его. Отобразится инструмент Элементы , а выбранный элемент изображения выделен в дереве DOM:

    Инструмент

  4. Откройте консоль , введите следующий код и нажмите клавишу ВВОД:

    getEventListeners($0);

    В приведенном выше фрагменте $0 кода является ярлыком для выбранного <img> в данный момент элемента в инструменте Элементы . Служебная getEventListeners() функция возвращает объект, содержащий все прослушиватели событий, назначенные изображению.

  5. Разверните объект, а затем разверните единственный прослушиватель событий в списке, чтобы просмотреть свойства прослушивателя. Свойство listener показывает имя функции, вызываемой при активации события (в этом примере showImage):

    Развернутый объект, показывающий свойство прослушивателя

Мониторинг событий, активированных на странице

Веб-сайты, использующие JavaScript, часто реагируют на события пользователей, происходящие в браузере. Отслеживать все события, активированные браузером, может быть трудно. Служебная monitorEvents() функция позволяет отслеживать события, которые активируются на веб-странице.

Мониторинг всех событий в элементе

Чтобы начать мониторинг событий, выполните приведенные далее действия.

  1. Перейдите на веб-страницу, которую вы хотите отслеживать. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Чтобы начать мониторинг событий, активируемых в элементе, например для одного из <img> элементов, введите следующий код в консоли и нажмите клавишу ВВОД:

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

    Приведенный выше код отслеживает все события, которые активируются в первом <img> элементе на странице.

  4. На отображаемой веб-странице наведите указатель мыши на изображение и наведите указатель мыши или вкладку на изображение с помощью клавиатуры. Такие события, как mouseover, mousemoveи focus регистрируются в консоли:

    Консольный инструмент, показывающий список всех событий мыши, которые активируются на изображении

При мониторинге событий вы получаете журналы в консоли каждый раз, когда событие активируется браузером. Это может привести к возникновению большого шума в консоли. Вы также можете отслеживать определенные события в элементе.

Мониторинг определенных событий в элементе

Чтобы начать мониторинг определенных событий в элементе, выполните указанные действия.

  1. Перейдите на веб-страницу, которую вы хотите отслеживать. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.

  2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

  3. Чтобы начать мониторинг только событий указателя мыши, мыши и щелчка, которые активируются для первого <img> элемента на странице, введите следующий код в консоли и нажмите клавишу ВВОД:

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

  4. На отображаемой веб-странице щелкните первое изображение. mousedownСобытия , mouseupи click регистрируются в консоли:

    Средство

Мониторинг событий в окне

Чтобы получать уведомление в консоли при каждом прокрутке или изменении размера окна:

  1. Вставьте следующий код в консоль:

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

  2. Прокрутите страницу и измените размер окна браузера. Консоль регистрирует события, которые активируются:

    Средство

Остановить мониторинг событий

При мониторинге событий в DOM консоль может заиметь. Чтобы остановить события мониторинга, используйте служебную unmonitorEvents() функцию:

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

Сохранение скриптов взаимодействия DOM в виде фрагментов кода

Если вы несколько раз вводите один и тот же код взаимодействия DOM в консоли, вместо этого попробуйте сохранить код в виде фрагмента кода, а затем запустить его. Фрагменты кода сохраняются в средстве "Источники" , и их можно запустить оттуда или из меню "Команда". Дополнительные сведения см. в статье Запуск фрагментов Кода JavaScript на любой веб-странице.

См. также