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

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

,

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

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

,

Кейси Баски
София Емельянова
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 + Down Srurow (Windows и Linux) и Shift + Option + Down Sharrow (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 <li class="demo--hover">The Lord of the Flies</li> мух См. Приложение: отсутствует параметры, если вы не видите эту опцию. Цвет фона остается оранжевым, даже если вы на самом деле не падаете над узлом.

Скрыть узел

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

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

    • Граф Монте -Кристо
    • Звезды мой пункт назначения

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

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

  3. Нажмите кнопку H снова. Узел снова показан.

Удалить узел

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

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

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

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

  3. Нажмите управление + z или команда + 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 в консоли, а затем нажмите ENTE снова. Теперь $0 оценивает <li>Dune</li> .

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

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

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

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

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

  2. Щелкните правой кнопкой мыши <li>The Big Sleep</li> в дереве DOM и выберите хранилище в качестве глобальной переменной . См. Приложение: отсутствует параметры, если вы не видите эту опцию.

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

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

Скопируйте js path

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

  1. Щелкните правой кнопкой мыши братьев Карамазова ниже и выберите осмотреть .

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

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

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

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

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

Разлом на DOM -изменения

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

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

Это охватывает большинство функций, связанных с DOM, в Devtools. Вы можете обнаружить остальных из них, щелкнув правой кнопкой мыши в дереве 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. Если нет, вернитесь к прокрутке в поле зрения и начните все сначала.

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

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

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

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

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

,

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

Посмотрите видео и завершите эти интерактивные учебники, чтобы узнать основы просмотра и изменения DOM страницы с использованием Chrome Devtools.

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

Просмотреть узлы DOM

Дерево Dom of the Elements -это то, где вы выполняете все действия, связанные с DOM в Devtools.

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

Когда вы заинтересованы в конкретном узле DOM, осмотреть - это быстрый способ открыть Devtools и исследовать этот узел.

  1. Щелкните правой кнопкой мыши Michelangelo ниже и выберите осмотреть .
    • Микеланджело
    • Рафаэль Осматривать узел Элементская панель 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. Нажмите клавишу со стрелками вниз 3 раза, чтобы вы заносили список <ul> , который вы только что рухнули. Это должно выглядеть так: <ul>...</ul>

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

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

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

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

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

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

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

Показать правители

С правителями выше и слева от вашего просмотра вы можете измерить ширину и высоту элемента, когда вы падаете над ним на панели Elements .

Правители.

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

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

Размеры правителей - пиксели.

Вы можете найти дерево DOM по строке, селектор CSS или селектор XPath.

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

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

    Подчеркивание запроса в баре поиска

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

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

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

Очищенный поиск при вводе флажок в настройках.

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

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

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

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

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

    • Фрай
    • Мишель

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

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

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

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

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

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

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

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

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

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

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

Вы также можете использовать параметр «Редактировать атрибут ».

Щелкните правой кнопкой мыши с помощью Attribute Attruite.

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

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

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

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

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

  3. Удалить li , button «Тип», затем нажмите ENTER . Узел <li> изменяется на узел <button> .

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

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

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

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

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

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

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

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

    Автозаполнение тегов HTML.

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

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

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

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

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

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

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

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

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

    Опция дубликата элемента, выделенная в раскрывающемся списке.

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

Вы также можете использовать сочетания клавиатуры: Shift + Alt + Down Srurow (Windows и Linux) и Shift + Option + Down Sharrow (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 <li class="demo--hover">The Lord of the Flies</li> мух См. Приложение: отсутствует параметры, если вы не видите эту опцию. Цвет фона остается оранжевым, даже если вы на самом деле не падаете над узлом.

Скрыть узел

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

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

    • Граф Монте -Кристо
    • Звезды мой пункт назначения

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

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

  3. Нажмите кнопку H снова. Узел снова показан.

Удалить узел

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

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

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

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

  3. Нажмите управление + z или команда + 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 в консоли, а затем нажмите ENTE снова. Теперь $0 оценивает <li>Dune</li> .

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

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

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

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

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

  2. Щелкните правой кнопкой мыши <li>The Big Sleep</li> в дереве DOM и выберите хранилище в качестве глобальной переменной . См. Приложение: отсутствует параметры, если вы не видите эту опцию.

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

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

Скопируйте js path

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

  1. Щелкните правой кнопкой мыши братьев Карамазова ниже и выберите осмотреть .

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

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

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

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

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

Разлом на DOM -изменения

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

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

Это охватывает большинство функций, связанных с DOM, в Devtools. Вы можете обнаружить остальных из них, щелкнув правой кнопкой мыши в дереве 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. Если нет, вернитесь к прокрутке в поле зрения и начните все сначала.

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

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

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

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

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