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

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

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

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

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

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

Проверить узел

Если вас интересует конкретный узел DOM, функция «Просмотреть код элемента» — это быстрый способ открыть инструменты разработчика и изучить этот узел.

  1. В приведенном ниже списке щелкните правой кнопкой мыши по файлу Michelangelo . В меню выберите «Просмотреть код элемента» .

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

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

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

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

  3. Выберите Токио из следующего списка.

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

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

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

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

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

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

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

    • Джон

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

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

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

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

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

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

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

Прокрутите, чтобы увидеть

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

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

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

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

После завершения вы можете вернуться к этому разделу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. В приведенном ниже списке щелкните правой кнопкой мыши по файлу Michelle и выберите «Просмотреть код элемента» .

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

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

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

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

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

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

  1. В приведенном ниже списке щелкните правой кнопкой мыши по файлу Howard и выберите «Проверить элемент» .

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

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

    После щелчка узел подсвечивается, указывая на его выделение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Выпадающее меню узла.

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

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

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

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

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

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

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

  1. Щелкните правой кнопкой мыши по файлу Nana в следующем списке и выберите «Просмотреть код элемента» .

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

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

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

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

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

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

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

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

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

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

  3. Скриншот сохраняется в папку загрузок ( Windows и macOS ).

Подробнее об этом читайте в статье «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> и выберите Force State > :hover . Если вы не видите этот параметр, ознакомьтесь с приложением, содержащим информацию об отсутствующих параметрах .

    Цвет фона остается оранжевым, даже если вы не наводите курсор на узел.

Скрыть узел

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

  1. В приведенном ниже списке щелкните правой кнопкой мыши по файлу The Stars My Destination и выберите «Просмотреть код элемента» .

    • Граф Монте-Кристо
    • Звёзды — моя судьба

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

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

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

Удалить узел

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

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

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

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

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

Доступ к узлам в консоли

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 (macOS), чтобы вставить выражение в консоль.

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

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

Перерыв при изменениях DOM

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

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

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

Читайте дальше:

Примите участие в сообществе 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. В данный момент объекты одинаковы как в 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» на сайте MDN.

Прокрутите, чтобы увидеть

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

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

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

Отсутствующие варианты

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

Куда нажать, если не отображаются все варианты?