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

Кейси Баски
София Емельянова
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. Щелкните правой кнопкой мыши Ринго ниже и выберите «Проверить» . <li>Ringo</li> выбран в дереве DOM.

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

    • Джон

      Проверка узла Ринго

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

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

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

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

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

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

Прокрутить до просмотра

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

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

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

  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.

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

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

В настройках снят флажок «Поиск по мере ввода».

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

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

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

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

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

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

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

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

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

Редактировать атрибуты

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

  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. Щелкните правой кнопкой мыши Nana ниже и выберите «Проверить» .

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

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

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

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

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

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

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

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

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

    Делается снимок экрана узла.

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

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

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

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

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

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

  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> и выберите «Принудительное состояние» > :hover . См. Приложение: Отсутствующие параметры, если вы не видите эту опцию. Цвет фона остается оранжевым, даже если вы на самом деле не наводите курсор на узел.

Скрыть узел

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

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

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

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

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

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

Удалить узел

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

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

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

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

  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 и выберите «Сохранить как глобальную переменную» . См. Приложение: Отсутствующие параметры, если вы не видите эту опцию.

  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 , чтобы оценить выражение.

    Результат выражения «Копировать путь JS»

Перерыв в изменениях 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 и добавляет в DOM еще один узел p . Полный DOM теперь выглядит так:

html
  head
    title
  body
    p
    script
    p

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

Дополнительную информацию см. в разделе «Введение в DOM» .

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

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

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

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

    Прокрутить до просмотра

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

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

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