Начало работы с просмотром и изменением DOM

Кейс Баскс
Kayce Basques
X GitHub
Софья Емельянова
Sofia Emelianova
GitHub

Посмотрите видео и пройдите эти интерактивные уроки, чтобы изучить основы просмотра и изменения DOM страницы с помощью Chrome DevTools.

В этом руководстве предполагается, что вы знаете разницу между DOM и HTML. См. Приложение: HTML против DOM для объяснения.

Просмотр узлов DOM

Панель «Дерево элементов DOM» — это место, где вы выполняете все действия, связанные с DOM в DevTools.

Осмотреть узел

Если вас интересует определенный узел DOM, Inspect — это быстрый способ открыть DevTools и исследовать этот узел.

  1. Щелкните правой кнопкой мыши по Микеланджело ниже и выберите «Просмотреть» .
    • Микеланджело
    • Рафаэль Проверка узла Откроется панель «Элементы» DevTools. <li>Michelangelo</li> будет выделен в дереве DOM . Выделение узла Микеланджело<
  2. Нажмите значок «Проверка» в верхнем левом углу DevTools. Значок «Осмотреть»

  3. Нажмите на текст Токио ниже.

    • Токио

    • Бейрут

      Теперь <li>Tokyo</li> выделен в дереве DOM.

Проверка узла также является первым шагом к просмотру и изменению стилей узла. См. Начало работы с просмотром и изменением CSS .

Навигация по дереву DOM с помощью клавиатуры

После выбора узла в дереве DOM вы можете перемещаться по дереву DOM с помощью клавиатуры.

  1. Щелкните правой кнопкой мыши Ringo ниже и выберите «Просмотреть» . <li>Ringo</li> будет выбран в дереве DOM.

    • Джордж
    • Ринго
    • Пол

    • Джон

      Проверка узла Ringo

  2. Нажмите клавишу со стрелкой вверх 2 раза. Выбрано <ul> .

    Проверка узла ul

  3. Нажмите клавишу со стрелкой влево . Список <ul> свернется.

  4. Нажмите клавишу со стрелкой влево еще раз. Выбран родительский узел <ul> . В данном случае это узел <li> , содержащий инструкции для шага 1.

  5. Нажмите клавишу со стрелкой вниз 3 раза, чтобы повторно выбрать список <ul> , который вы только что свернули. Это должно выглядеть так: <ul>...</ul>

  6. Нажмите клавишу со стрелкой вправо . Список развернется.

Прокрутите в поле зрения

При просмотре DOM-дерева иногда вы можете обнаружить, что вас интересует узел DOM, который в данный момент не находится в области просмотра. Например, предположим, что вы прокрутили страницу до конца и вас интересует узел <h1> в верхней части страницы. Прокрутка в область просмотра позволяет быстро изменить положение области просмотра, чтобы вы могли видеть узел.

  1. Щелкните правой кнопкой мыши Magritte ниже и выберите «Просмотреть» .

    • Магритт
    • Сутин

  2. Перейдите в Приложение: Прокрутите в раздел «Вид» внизу этой страницы. Инструкции продолжаются там.

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

Показать линейки

С помощью линеек, расположенных выше и слева от области просмотра, вы можете измерить ширину и высоту элемента, наведя на него курсор на панели «Элементы» .

Правители.

Включить линейки можно одним из двух способов:

  • Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд , введите Show rulers on hover и нажмите Enter .
  • Проверьте Настройки > Настройки > Элементы > Показывать линейки при наведении .

Единицей измерения линеек являются пиксели.

Вы можете осуществлять поиск в дереве DOM по строке, селектору CSS или селектору XPath.

  1. Наведите курсор на панель «Элементы» .
  2. Нажмите Control + F или Command + F (Mac). Панель поиска откроется в нижней части дерева DOM.

  3. Введите The Moon is a Harsh Mistress . Последнее предложение выделено в дереве DOM.

    Выделение запроса в строке поиска

Как упоминалось выше, строка поиска также поддерживает селекторы CSS и XPath.

Панель Elements выбирает первый совпадающий результат в дереве DOM и выводит его в область просмотра. По умолчанию это происходит по мере ввода текста. Если вы всегда работаете с длинными поисковыми запросами, вы можете настроить DevTools на запуск поиска только при нажатии Enter .

Чтобы избежать ненужных переходов между узлами, снимите флажок > Настройки > Глобальные > Поиск по мере ввода .

Снят флажок «Искать по мере ввода текста» в настройках.

Редактировать DOM

Вы можете редактировать DOM «на лету» и видеть, как эти изменения влияют на страницу.

Редактировать содержимое

Чтобы отредактировать содержимое узла, дважды щелкните по содержимому в дереве DOM.

  1. Щелкните правой кнопкой мыши Мишель ниже и выберите «Просмотреть» .

    • Жарить
    • Мишель

  2. В дереве DOM дважды щелкните Michelle . Другими словами, дважды щелкните текст между <li> и </li> . Текст выделяется синим цветом, что означает, что он выбран.

    Редактирование текста

  3. Удалите Michelle , введите Leela , затем нажмите Enter для подтверждения изменения. Текст выше изменится с Michelle на Leela .

Изменить атрибуты

Чтобы изменить атрибуты, дважды щелкните имя или значение атрибута. Следуйте инструкциям ниже, чтобы узнать, как добавлять атрибуты к узлу.

  1. Щелкните правой кнопкой мыши Говарда ниже и выберите «Проверить» .

    • Говард
    • Винс

  2. Дважды щелкните <li> . Текст подсвечивается, указывая на то, что узел выбран.

    Редактирование узла

  3. Нажмите клавишу со стрелкой вправо , добавьте пробел, введите style="background-color:gold" и нажмите Enter . Цвет фона узла изменится на золотой.

    Добавление атрибута стиля к узлу

Вы также можете воспользоваться опцией «Изменить атрибут» , вызываемой правой кнопкой мыши.

Щелкните правой кнопкой мыши параметры с выделенным атрибутом редактирования.

Изменить тип узла

Чтобы изменить тип узла, дважды щелкните по типу, а затем введите новый тип.

  1. Щелкните правой кнопкой мыши Хэнка ниже и выберите «Просмотреть» .

    • Дин
    • Хэнк
    • Фаддей
    • Брок

  2. Дважды щелкните <li> . Текст li будет выделен.

  3. Удалите li , введите button , затем нажмите Enter . Узел <li> изменится на узел <button> .

    Изменение типа узла на кнопку

Редактировать как HTML

Чтобы редактировать узлы как HTML с подсветкой синтаксиса и автозаполнением, выберите Редактировать как HTML в раскрывающемся меню узла.

  1. Щелкните правой кнопкой мыши по Леонарду ниже и выберите «Просмотреть» .

    • Пенни
    • Говард
    • Раджеш
    • Леонард

  2. На панели «Элементы» щелкните правой кнопкой мыши текущий узел и выберите в раскрывающемся меню пункт «Изменить как HTML» .

    Раскрывающееся меню узла.

  3. Нажмите Enter , чтобы начать новую строку, и начните вводить <l . DevTool подсвечивает синтаксис HTML и автоматически заполняет теги.

    Автодополнение HTML-тегов.

  4. Выберите элемент li из меню автозаполнения и введите > . DevTools автоматически добавит закрывающий тег </li> после курсора.

    DevTools автоматически закрывает тег.

  5. Введите Sheldon внутри тега и нажмите Control / Command + Enter , чтобы применить изменения.

    Применение изменений.

Дублировать узел

Вы можете создать дубликат элемента, щелкнув правой кнопкой мыши по пункту «Дублировать элемент» .

  1. Щелкните правой кнопкой мыши по Нане ниже и выберите «Просмотреть» .

    • Костер тщеславия
    • Нана
    • Орландо
    • Белый шум

  2. На панели «Элементы» щелкните правой кнопкой мыши элемент <li>Nana</li> и выберите «Дублировать элемент» в раскрывающемся меню.

    В раскрывающемся списке выделена опция «Дублировать элемент».

  3. Вернуться на страницу. Элемент списка был мгновенно продублирован.

Вы также можете использовать сочетания клавиш: Shift + Alt + Стрелка вниз (Windows и Linux) и Shift + Option + Стрелка вниз (MacOS).

Сделайте снимок экрана узла

С помощью функции «Снимок экрана узла» можно сделать снимок экрана любого отдельного узла в дереве DOM.

  1. Щелкните правой кнопкой мыши любое изображение на этой странице и выберите «Проверить» .

  2. На панели «Элементы» щелкните правой кнопкой мыши URL-адрес изображения и выберите в раскрывающемся меню пункт «Сделать снимок экрана узла» .

    Снимок экрана узла.

  3. Скриншот будет сохранен в загрузках.

    Скриншот узла сохранен в загрузках.

Чтобы узнать больше о способах создания снимков экрана с помощью DevTools, ознакомьтесь с 4 способами создания снимков экрана с помощью DevTools .

Изменить порядок узлов DOM

Перетащите узлы, чтобы изменить их порядок.

  1. Щелкните правой кнопкой мыши по Элвису Пресли ниже и выберите Inspect . Обратите внимание, что это последний элемент в списке.

    • Стиви Уандер
    • Том Уэйтс
    • Крис Тайл
    • Элвис Пресли

  2. В дереве DOM перетащите <li>Elvis Presley</li> в начало списка.

    Перетаскивание узла в начало списка

Состояние силы

Вы можете принудительно оставить узлы в таких состояниях, как :active , :hover , :focus , :visited и :focus-within .

  1. Наведите курсор на «Повелителя мух» ниже. Цвет фона станет оранжевым.

    • Повелитель мух
    • Преступление и наказание
    • Моби Дик

  2. Щелкните правой кнопкой мыши по «Повелителю мух» выше и выберите «Просмотреть» .

  3. Щелкните правой кнопкой мыши <li class="demo--hover">The Lord of the Flies</li> и выберите Force State > :hover . См. Приложение: Отсутствующие параметры, если вы не видите этот параметр. Цвет фона остается оранжевым, даже если вы фактически не наводите курсор на узел.

Скрыть узел

Нажмите H , чтобы скрыть узел.

  1. Щелкните правой кнопкой мыши пункт «Звезды — мой пункт назначения» ниже и выберите «Проверить» .

    • Граф Монте-Кристо
    • Звезды Моя Цель

  2. Нажмите клавишу H. Узел скрыт. Вы также можете щелкнуть правой кнопкой мыши по узлу и использовать опцию Скрыть элемент .

    Как выглядит узел в дереве DOM после того, как он скрыт

  3. Нажмите клавишу H еще раз. Узел снова отобразится.

Удалить узел

Нажмите Delete , чтобы удалить узел.

  1. Щелкните правой кнопкой мыши по элементу Foundation ниже и выберите «Проверить» .

    • Иллюстрированный человек
    • Сквозь зеркало
    • Фундамент

  2. Нажмите клавишу Delete . Узел будет удален. Вы также можете щелкнуть правой кнопкой мыши узел и использовать опцию Delete element .

  3. Нажмите Control + Z или Command + Z (Mac). Последнее действие отменяется, и узел появляется снова.

Узлы доступа в консоли

DevTools предоставляет несколько сочетаний клавиш для доступа к узлам DOM из консоли или для получения ссылок JavaScript на них.

Ссылка на текущий выбранный узел с помощью $0

При проверке узла текст == $0 рядом с узлом означает, что вы можете ссылаться на этот узел в консоли с помощью переменной $0 .

  1. Щелкните правой кнопкой мыши по левой руке тьмы ниже и выберите «Просмотреть» .

    • Левая рука тьмы
    • Дюна

  2. Нажмите клавишу Escape , чтобы открыть консольный ящик.

  3. Введите $0 и нажмите клавишу Enter . Результат выражения показывает, что $0 вычисляется как <li>The Left Hand of Darkness</li> .

    Результат первого выражения $0 в консоли

  4. Наведите курсор на результат. Узел подсвечивается в области просмотра.

  5. Нажмите <li>Dune</li> в дереве DOM, снова введите $0 в консоли, а затем снова нажмите Enter . Теперь $0 вычисляется как <li>Dune</li> .

    Результат второго выражения $0 в консоли

Сохранить как глобальную переменную

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

  1. Щелкните правой кнопкой мыши по элементу The Big Sleep ниже и выберите «Проверить» .

    • Большой сон
    • Долгое прощание

  2. Щелкните правой кнопкой мыши <li>The Big Sleep</li> в дереве DOM и выберите Store as global variable . См. Приложение: Отсутствующие параметры, если вы не видите этот параметр.

  3. Введите temp1 в Консоли и нажмите Enter . Результат выражения показывает, что переменная вычисляется как узел.

    Результат выражения temp1

Копировать путь JS

Скопируйте путь JavaScript к узлу, когда вам нужно будет сослаться на него в автоматизированном тесте.

  1. Щелкните правой кнопкой мыши по произведению «Братья Карамазовы» ниже и выберите «Просмотреть» .

    • Братья Карамазовы
    • Преступление и наказание

  2. Щелкните правой кнопкой мыши <li>The Brothers Karamazov</li> в дереве DOM и выберите Копировать > Копировать путь JS . Выражение document.querySelector() , которое разрешается в узел, было скопировано в буфер обмена.

  3. Нажмите Control + V или Command + V (Mac), чтобы вставить выражение в консоль.

  4. Нажмите Enter , чтобы оценить выражение.

    Результат выражения Copy JS Path

Перерыв на изменения DOM

DevTools позволяет вам приостанавливать JavaScript страницы, когда JavaScript изменяет DOM. См. Точки останова изменения DOM .

Следующие шаги

Это охватывает большинство функций DevTools, связанных с DOM. Вы можете обнаружить остальные, щелкнув правой кнопкой мыши узлы в дереве DOM и поэкспериментировав с другими опциями, которые не были рассмотрены в этом руководстве. См. также Сочетания клавиш панели элементов .

Посетите домашнюю страницу Chrome DevTools, чтобы узнать обо всех возможностях DevTools.

См. раздел «Сообщество» , если вы хотите связаться с командой DevTools или получить помощь от сообщества DevTools.

Приложение: HTML против DOM

В этом разделе кратко объясняется разница между HTML и DOM.

Когда вы используете веб-браузер для запроса страницы, например https://example.com сервер возвращает HTML-код следующим образом:

<!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 и создает дерево объектов, подобное этому:

html
  head
    title
  body
    h1
    p
    script

Это дерево объектов или узлов, представляющих содержимое страницы, называется DOM. Сейчас оно выглядит так же, как HTML, но предположим, что скрипт, на который ссылаются в нижней части HTML, запускает этот код:

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

Этот код удаляет узел h1 и добавляет еще один узел p в DOM. Полный DOM теперь выглядит так:

html
  head
    title
  body
    p
    script
    p

HTML страницы теперь отличается от ее DOM. Другими словами, HTML представляет начальное содержимое страницы, а DOM представляет текущее содержимое страницы. Когда JavaScript добавляет, удаляет или редактирует узлы, DOM становится отличным от HTML.

Более подробную информацию см. в разделе Введение в DOM .

Приложение: Прокрутите для просмотра

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

  1. Узел <li>Magritte</li> должен быть по-прежнему выбран в дереве DOM. Если нет, вернитесь к Scroll into view и начните заново.

  2. Щелкните правой кнопкой мыши узел <li>Magritte</li> и выберите Прокрутить в вид . Окно просмотра прокручивается обратно, чтобы вы могли видеть узел Magritte . См. Приложение: Отсутствующие параметры, если вы не видите параметр Прокрутить в вид .

    Прокрутите в поле зрения

Приложение: Отсутствующие параметры

Многие инструкции в этом руководстве советуют вам щелкнуть правой кнопкой мыши по узлу в дереве DOM, а затем выбрать опцию из всплывающего контекстного меню. Если вы не видите указанную опцию в контекстном меню, попробуйте щелкнуть правой кнопкой мыши вне текста узла.

Куда нажать, если вы не видите все варианты