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

  • Статья

Чтобы узнать об основах просмотра и изменения модели DOM страницы с помощью microsoft Edge DevTools, ознакомьтесь с этими интерактивными руководствами.

Чтобы понять разницу между DOM и HTML, см. приложение: HTML и DOM ниже.

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

Дерево DOM средства "Элементы" — это место, где вы выполняете все действия, связанные с DOM, в средствах разработки.

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

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке. (Чтобы открыть ссылку в новом окне или вкладке, щелкните ссылку правой кнопкой мыши. Или нажмите и удерживайте нажатой клавишу CTRL (Windows, Linux) или Command (macOS), а затем щелкните ссылку.)

  1. На отображаемой веб-странице в разделе Проверка узла щелкните правой кнопкой мыши Микеланджело и выберите Пункт Проверить:

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

    Откроется инструмент Элементы в Средствах разработки. Узел <p>Michelangelo</p> выделен в дереве DOM:

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

  2. Щелкните значок Проверить (проверить) в левом верхнем углу окна Средства разработки:

    Значок проверки

  3. В разделе Проверка узла щелкните текст Tokyo . <p>Tokyo</p> Теперь узел выделен в дереве DOM.

Проверка узла также является первым шагом к просмотру и изменению стилей узла. См . статью Начало работы с просмотром и изменением CSS.

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Навигация по дереву DOM с помощью клавиатуры щелкните правой кнопкой мыши Ringo и выберите Пункт Проверить. <p>Ringo</p> выбрано в дереве DOM:

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

  3. Дважды нажмите клавишу СТРЕЛКА ВВЕРХ . <div> выбрано:

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

  4. Нажмите клавишу СТРЕЛКА ВЛЕВО . Список <div> сворачивается.

  5. Снова нажмите клавишу СТРЕЛКА ВЛЕВО . Выбран родительский <div> элемент узла. В этом случае это <section> объект , который имеет идентификатор navigate-the-dom-tree-with-a-keyboard-1.

  6. Нажмите клавишу СТРЕЛКА ВНИЗ два раза, чтобы повторно выбрать <div> список, который вы только что свернули.

    Он должен выглядеть следующим образом: <div>... </div>.

  7. Нажмите клавишу СТРЕЛКА ВПРАВО . Список будет развернут.

Прокрутка в представление

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Прокрутите в режиме просмотра щелкните правой кнопкой мыши Magritte и выберите пункт Проверить.

  3. Прокрутите страницу примеров модели DOM вниз.

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

  5. Щелкните узел правой <p>Magritte</p> кнопкой мыши и выберите Прокрутить в представлении:

    Прокрутка в представление

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

Поиск узлов

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

  1. Наведите курсор на инструмент "Элементы" , например, щелкнув вкладку Элементы .

  2. Нажмите клавиши CTRL+F (Windows, Linux) или COMMAND+F (macOS). Откроется панель поиска в нижней части дерева DOM.

  3. Тип Луна суровая хозяйка. Последнее предложение выделено в дереве DOM:

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

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

Изменение DOM

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

Изменение текстового содержимого

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Изменить содержимое щелкните правой кнопкой мыши Мишель и выберите Пункт Проверить.

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

    Изменение текста

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

Изменение или добавление атрибутов

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

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Изменить атрибуты щелкните правой кнопкой мыши Говард и выберите Пункт Проверить.

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

    Изменение узла

  4. Нажмите клавишу СТРЕЛКА ВПРАВО , добавьте пробел, введите style="background-color:gold"и нажмите клавишу ВВОД. Цвет фона узла изменяется на золотой:

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

Изменение имени тега узла

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Изменение имени тега узла щелкните правой кнопкой мыши Hank и выберите пункт Проверить.

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

  4. Delete p, введите button, а затем нажмите клавишу ВВОД. Узел <p> изменяется на <button> узел:

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

Изменение нескольких узлов, текста и атрибутов

Чтобы изменить имя тега, текстовое содержимое или атрибуты нескольких узлов одновременно, можно изменить часть модели DOM с помощью текстового редактора HTML дерева DOM следующим образом:

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице щелкните правой кнопкой мыши раздел Изменить содержимое, имя тега и Атрибуты , а затем выберите Пункт Проверить.

  3. В дереве DOM щелкните узел правой <section id="edit-as-html-1"> кнопкой мыши и выберите команду Изменить как HTML. Редактор HTML отображается в дереве DOM с полем вокруг редактируемого раздела:

    Редактор HTML

  4. Введите изменения, которые вы хотите внести в редакторе HTML, например:

    • Добавление, удаление или изменение атрибутов.
    • Добавление или удаление узлов.
    • Изменение текстового содержимого или имен тегов узлов.

    Например, добавьте <p>Dijon</p> после <p>Marseille</p> строки.

  5. Щелкните дерево DOM за пределами редактора HTML или нажмите клавиши CTRL+ВВОД. Изменения применяются к дереву DOM и отображаемой веб-странице, а редактор HTML закрывается:

    Новое дерево DOM с дополнительным узлом после закрытия редактора HTML

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

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Изменить порядок узлов DOM щелкните правой кнопкой мыши Elvis Presley и выберите Пункт Проверить.

  3. В дереве DOM перетащите фигуру <p>Elvis Presley</p> в начало списка:

    Перетащите узел в начало списка

Состояние силы

Вы можете принудительно сохранять узлы в состояниях, включая :active, :hover, :focus, :visitedи :focus-within, следующим образом:

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Состояние силы наведите указатель мыши на Властелин мух. Цвет фона становится оранжевым.

  3. Щелкните правой кнопкой мыши Повелитель мух и выберите Пункт Проверить.

  4. Щелкните правой кнопкой мыши <p class="demo--hover">The Lord of the Flies</p>и выберите Принудительное состояние>:наведение. Если этот параметр не отображается, см. раздел Приложение: отсутствующие параметры ниже. Цвет фона остается оранжевым, даже если вы на самом деле не наведите указатель мыши на узел.

Скрытие узла

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

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

  3. Нажмите клавишу H . Узел скрыт от отображаемой веб-страницы:

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

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

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

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Удаление узла щелкните правой кнопкой мыши элемент Foundation и выберите Пункт Проверить.

  3. Нажмите клавишу DELETE. Узел удаляется.

  4. Нажмите клавиши CTRL+Z (Windows, Linux) или COMMAND+Z (macOS). Последнее действие будет отменено, и узел появляется снова.

Узлы доступа в консоли

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

Ссылка на текущий выбранный узел с $0

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Ссылка на текущий выбранный узел с $0 щелкните правой кнопкой мыши Левая рука тьмы и выберите Пункт Проверить.

  3. Нажмите клавишу ESC , чтобы открыть консоль на панели Быстрого просмотра .

  4. Введите $0 и нажмите клавишу ВВОД. Результат выражения показывает, что $0 вычисляется как <p>The Left Hand of Darkness</p>:

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

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

  6. Щелкните <p>Dune</p> дерево DOM, введите $0 консоль еще раз и нажмите клавишу ВВОД . $0 Теперь вычисляет значение <p>Dune</p>:

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

Хранение в качестве глобальной переменной

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Сохранить как глобальную переменную щелкните правой кнопкой мыши Большой спящий режим и выберите пункт Проверить.

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

  4. Введите temp1 в консоли и нажмите клавишу ВВОД. Результат выражения показывает, что переменная оценивается в узел:

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

Копирование пути JS

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Копировать путь JS щелкните правой кнопкой мыши Братья Карамазовы и выберите пункт Проверить.

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

  4. Нажмите клавиши CTRL+V (Windows, Linux) или COMMAND+V (macOS), чтобы вставить выражение в консоль .

  5. Нажмите клавишу ВВОД , чтобы вычислить выражение. Выражение Copy JS Path вычисляется для узла:

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

Прерывание изменений DOM

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

Прерывание изменения атрибутов

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

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Прерывание изменения атрибутов щелкните правой кнопкой мыши Sauerkraut и выберите Пункт Проверить.

  3. В дереве DOM щелкните правой кнопкой мыши <p id="botm_target">Sauerkraut</p>и выберите команду Прервать>изменения атрибутов:

    Прерывание изменения атрибутов

    См . раздел Приложение. Отсутствуют параметры , если параметр не отображается.

  4. Нажмите кнопку Задать фон . При этом атрибуту узла присваивается style значение background-color:thistle. DevTools приостанавливает страницу и выделяет код, который вызвал изменение атрибута в средстве Источники :

    Средство

  5. Щелкните Возобновить скрипт (возобновление скрипта), чтобы возобновить выполнение JavaScript.

Перерыв при удалении узла

Если вы хотите приостановить удаление определенного узла, используйте точки останова удаления узла.

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Прерывание при удалении узла щелкните правой кнопкой мыши Элемент Neuromancer и выберите Пункт Проверить.

  3. В дереве DOM щелкните правой кнопкой мыши <p id="target">Neuromancer</p>, а затем выберите Команду Разорвать при удалении>узла. См . раздел Приложение. Отсутствуют параметры , если параметр не отображается.

  4. Нажмите кнопку Удалить выше. DevTools приостанавливает страницу и выделяет код, который привел к удалению узла.

  5. Выберите Возобновление скрипта (скрипт возобновления).

Перерыв на изменения поддеревого дерева

После установки точки останова изменения поддеревого дерева на узле Средства разработки приостанавливают страницу при добавлении или удалении любого из потомков узла.

  1. Откройте демонстрационную страницу Примеры DOM в новом окне или вкладке.

  2. На отображаемой веб-странице в разделе Изменение поддеревого дерева щелкните правой кнопкой мыши элемент A Fire On The Deep (Пожар на глубине ), а затем выберите Пункт Проверить.

  3. В дереве DOM щелкните правой кнопкой мыши <div id="ul_target">, который является узлом над <p>A Fire Upon the Deep</p>, а затем выберите Пункт Прервать>изменения поддеревого дерева. Если команда Изменения поддеревого дерева не отображается, см. раздел Приложение: отсутствующие параметры.

  4. Нажмите кнопку Добавить дочернего элемента. Код приостанавливается, <p> так как узел был добавлен в список.

  5. Выберите Возобновление скрипта (скрипт возобновления).

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

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

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

Приложение: HTML и DOM

В этом разделе объясняется разница между HTML и DOM.

При использовании веб-браузера для запроса страницы сервер возвращает 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, как показано ниже:

html
    head
        title
    body
        h1
        p
        script

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

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

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

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

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.