Как начать просматривать и изменять DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Дерево DOM на панели Элементы – это место, где в DevTools выполняются все действия, связанные с DOM.

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

Если вас интересует определенный узел DOM, Проверить элемент – это быстрый способ открыть инструменты разработчика и изучить этот узел.

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

    • Микеланджело
    • Рафаэль

    Откроется панель Элементы в Инструментах разработчика. <li>Michelangelo</li> выделен в дереве DOM.

    Выделение узла &quot;Микеланджело&quot;

  2. Нажмите Выбрать элемент.

  3. Выберите Токио из списка.

    • Токио
    • Бейрут

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

Проверка узла – это также первый шаг к просмотру и изменению его стилей и CSS.

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

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

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

    • George
    • Ринго
    • Paul

    • John

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

  2. Дважды нажмите на стрелку вверх. Выбрано: <ul>.

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

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

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

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

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

Прокрутить в видимую область

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

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

    • Magritte
    • Сутин

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

После этого вернитесь к этому разделу.

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

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

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

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

Единица измерения на линейках – пиксели.

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

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

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

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

Строка поиска также поддерживает селекторы CSS и XPath.

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

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

Снимите флажок &quot;Поиск при вводе запроса&quot; в настройках.

Изменение DOM

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

Изменить контент

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

  1. В списке ниже нажмите правой кнопкой мыши на имя Michelle и выберите Проверить.

    • Жарка
    • Марина

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

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

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

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

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

  1. В списке ниже нажмите правой кнопкой мыши на имя Howard и выберите Проверить.

    • Howard
    • Винс

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

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

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

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

Как изменить тип узла

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

  1. В списке ниже нажмите правой кнопкой мыши на элемент Hank и выберите Просмотреть код.

    • Декан
    • CANNOT TRANSLATE
    • Фаддей
    • Брок

  2. Нажмите дважды на значок <li>. Текст li выделен.

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

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

Как изменить HTML-код

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

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

    • Пенни
    • Howard
    • Раджеш
    • Leonard

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

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

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

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

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

    Инструменты разработчика автоматически закроют тег.

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

Как создать копию узла

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

  1. Нажмите правой кнопкой мыши на элемент Nana в списке ниже и выберите Просмотреть код.

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

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

    В раскрывающемся меню выделен вариант &quot;Создать копию элемента&quot;.

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

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

Как сделать скриншот узла

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

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

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

    Создание скриншота узла.

  3. Скриншот будет сохранен в папке со скачанными файлами (Windows и macOS).

Подробнее о том, как сделать скриншот с помощью инструментов разработчика…

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

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

  1. В списке ниже нажмите правой кнопкой мыши на элемент Elvis Presley и выберите Просмотреть код. Это последний пункт в списке.

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

  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. В списке нажмите правой кнопкой мыши на элемент The Stars My Destination и выберите Проверить.

    • Граф Монте-Кристо
    • Тигр! Тигр!

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

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

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

Удаление узла

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

  1. В списке ниже нажмите правой кнопкой мыши на элемент Foundation и выберите Просмотреть код.

    • Человек в картинках
    • Алиса в Зазеркалье
    • Фундамент

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

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

Как получить доступ к узлам в консоли

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

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

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

  1. Нажмите правой кнопкой мыши на элемент списка The Left Hand of Darkness и выберите Просмотреть код.

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

  2. Нажмите клавишу Esc, чтобы открыть панель консоли. Возможно, вам потребуется выбрать Консоль, чтобы открыть ее.

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

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

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

  5. Нажмите <li>Dune</li> в дереве DOM, снова введите $0 в консоли и нажмите клавишу Ввод. Теперь $0 возвращает <li>Dune</li>.

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

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

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

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

    • Глубокий сон
    • Долгое прощание

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

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

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

Скопировать путь JS

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

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

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

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

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

  4. Чтобы вычислить выражение, нажмите клавишу Ввод.

    Результат выражения &quot;Копировать путь JS&quot;

Точки останова при изменении DOM

Инструменты разработчика позволяют приостановить выполнение кода JavaScript на странице, когда он изменяет DOM. Подробнее о точках останова при изменении DOM…

Дальнейшие действия

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

Дополнительная информация

Присоединитесь к сообществу разработчиков инструментов, чтобы связаться с командой 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. Сейчас объекты одинаковы как в DOM, так и в HTML.

Предположим, что файл script.js в нижней части 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. В дереве DOM должен быть выбран узел <li>Magritte</li>. Если нет, вернитесь к разделу Прокрутка до области просмотра и начните заново.

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

Отсутствуют параметры

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

Что делать, если вы не видите все варианты