Редактор Studio: работа с порядком DOM
6 мин.
Объектная модель документа (DOM) определяет структуру страниц сайта, а также порядок перехода по элементам и их загрузки. Организация порядка DOM на сайте может улучшить его специальные возможности и производительность, а также повысить удобство для посетителей.
Полезно знать:
Организация элементов по порядку DOM особенно важна при использовании сложных инструментов макета на сайте, таких как стопки и Flex-контейнеры.
Значение порядка в DOM
Порядок DOM определяет последовательность загрузки, чтения и перехода по элементам на странице с помощью клавиши Tab. Это означает, что он может влиять на следующие аспекты сайта:
- Специальные возможности: Некоторые посетители могут использовать вспомогательные технологии для навигации по сайту, такие как программы экранного доступа и/или клавиша Tab. DOM сайта определяет порядок, в котором он считывается программами экранного доступа, а также порядок перехода по клавише Tab. Подробнее о DOM и специальных возможностях.
- Производительность: DOM определяет последовательность загрузки элементов на сайте. Соответствие порядка DOM визуальному порядку элементов создает логичный процесс загрузки. Подробнее о DOM и производительности.
- Позиция в соцсетях: Поскольку выровненная логическая структура может улучшить специальные возможности и загрузку сайта, она также может повысить позицию сайта в соцсетях.
Логичный порядок DOM важен, так как он обеспечивает лучший опыт для посетителей сайта. Например, сначала должно идти меню сайта, затем остальные элементы в хедере, заголовок страницы, содержимое страницы и так далее.
Автоматический порядок в DOM
Автоматический (авто) DOM основан на визуальном порядке элементов на странице — слева направо и сверху вниз. Порядок DOM автоматически перестраивается по мере того, как вы добавляете, выравниваете и меняете размер элементов, поэтому он остается оптимизированным в процессе работы.
Отключение автоматического порядка DOM
Если вы заметили проблему с порядком DOM на сайте, над которым работаете, вы можете отключить его для всего сайта. Если проблема возникла с конкретными элементами, вы можете отключить его в отдельных секциях и контейнерах, а также в ячейках сетки внутри секции.
Выберите вариант, чтобы узнать, как отключить автоматический порядок DOM:
Весь сайт
в левом верхнем углу редактора.
Секции и контейнеры
Ячейки сетки в разделе
Работа с закрепленными элементами и секциями
Изменение порядка элементов в DOM вручную
После отключения автоматического порядка DOM вы можете изменить его вручную, чтобы он соответствовал визуальному порядку элементов (слева направо, сверху вниз).
Чтобы изменить порядок в DOM вручную:
- Нажмите Слои
в левой части редактора. - Выберите, что вы хотите упорядочить:
- Элементы внутри секции:
- Выберите секцию, чтобы открыть ее.
- Перетащите элементы в нужное положение.
- Секции:
- При наведении на верхнюю секцию нажмите на иконку Другие действия
. - Нажмите Упорядочить.
- Нажмите Перенести на передний план.
- Повторите шаги i–iii для всех остальных секций, двигаясь сверху вниз в панели.
- При наведении на верхнюю секцию нажмите на иконку Другие действия
- Элементы внутри секции:
Изменение порядка в DOM
Вы можете изменить порядок DOM элементов в секции, Flex-контейнере, стопке или на всей странице одним кликом. Порядок оптимизирован в соответствии с визуальным расположением элементов (слева направо и сверху вниз).
Чтобы изменить порядок страницы в DOM:
- Нажмите Страницы
в левой части редактора. - Выберите нужную страницу.
- Нажмите на иконку Другие действия .
- Нажмите Реорганизовать порядок DOM.
Чтобы изменить порядок элементов в DOM:
- Нажмите Слои в левой части редактора.
- Выберите нужную секцию, Flex-контейнер или стопку.
- Нажмите на иконку Другие действия .
- Нажмите Реорганизовать порядок DOM.
Часто задаваемые вопросы
Выберите вопрос, чтобы узнать больше о порядке DOM на сайте.
Как проверить порядок в DOM на сайте, который я создаю?
Как работает автоматический порядок DOM на страницах сайта?
Где еще можно включить автоматический порядок DOM?
Применяется ли автоматический порядок DOM где-то еще?
Что произойдет с автопорядком DOM, если я изменю порядок элементов в панели «Слои»?
Как DOM работает с языками сайта?