HTML-структура
Дерево DOM текущей страницы — навигация, выделение и удаление элементов
HTML-структура
Вкладка «HTML-структура» в левой панели редактора — это дерево DOM текущей страницы. На больших страницах это удобнее, чем кликать по холсту: всё видно сразу, можно быстро добраться до глубоко вложенного элемента.
Что показывает дерево
Каждая строка — один HTML-элемент:
- Тег —
div,section,h1,button,imgи т. д. - Класс или id — короткая подсказка, чтобы отличать одинаковые теги.
- Иконка раскрытия — у элементов с детьми. Клик раскрывает/сворачивает поддерево.
Навигация
- Клик по строке — выделяет элемент. Он подсвечивается в холсте и попадает в инспектор справа.
- Клик по элементу на холсте — раскрывает дерево до этого элемента и выделяет соответствующую строку.
Так связь работает в обе стороны: видите элемент в дереве — он находится на канвасе, кликаете на канвасе — раскрывается дерево.
Действия над элементом
Через контекстное меню (правый клик по строке дерева) или через инспектор:
| Действие | Где |
|---|---|
| Дублировать | Инспектор, кнопка «Дублировать элемент» |
| Удалить | Инспектор или клавиша Delete при выделении |
| Сменить тег | Инспектор, поле «Сменить тег элемента» |
| Снять выделение | Инспектор или Esc |
Когда удобно дерево, а когда холст
- Дерево — на больших страницах, когда нужно добраться до элемента глубоко внутри секции; для перестановки порядка; чтобы увидеть всю структуру разом.
- Холст — когда вы видите элемент на странице и хотите быстро его поправить.
Соседи и контейнеры
Если хотите выделить контейнер вместо элемента внутри него — кликните на нужный уровень в дереве. Например, если внутри карточки лежит заголовок и кнопка, дерево покажет иерархию <article> → <h2> + <a>. Клик на <article> выделит всю карточку.