Начало работы с просмотром и изменением 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. Скриншот будет сохранен в ваших загрузках.

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

Дополнительные сведения о способах создания снимков экрана с помощью DevTools см. в разделе «4 способа создания снимков экрана с помощью DevTools» .

Изменение порядка узлов 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, а затем выбрать параметр во всплывающем контекстном меню. Если вы не видите указанную опцию в контекстном меню, попробуйте щелкнуть правой кнопкой мыши вне текста узла.

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