DOM — это объектная модель документа, которую браузер создает в памяти компьютера на основании HTML-кода, полученного им от сервера. Иными словами, это представление HTML-документа в виде дерева тегов.
Такое дерево нужно для правильного отображения сайта и внесения изменений на страницах с помощью JavaScript. JavaScript — это «живой» язык, он может изменять страницу в реальном времени уже после того, как она «пришла» с сервера в браузер. Этим JavaScript принципиально отличается от PHP, который компилирует страницу и только потом посылает в браузер уже готовый HTML-код.
Для чтения и изменения DOM браузеры предоставляют DOM API (программный интерфейс). DOM API — это набор различных объектов, которые разработчик использует для чтения и изменения DOM с помощью JavaScript.
Из чего состоит HTML-код страницы
Страница на HTML состоит из тегов, вложенных в друг друга. Самый общий тег — это HTML. В него вкладываются два дочерних тега head и body.
Тег head используется для подключения информации, которая не будет отображаться непосредственно на странице, но будет использоваться для подключения важных файлов. Тут бывает, например, подключение одного или нескольких CSS-файлов, подключенные шрифты, название сайта, язык, кодировка, скрипты, которые должны выполняться в первую очередь, иконка сайта или базовый фон.
В body находится значимое содержимое. Обычно в body выделяют три части: шапка сайта, основное содержимое и подвал. В шапке обычно содержится верхнее меню сайта, за это отвечает тег header. Для содержимого нет определенного тега, но обычно используется section. Для подвала используется footer, там обычно содержатся контактная информация, ссылки на ключевые страницы сайта и копирайт. Теги header и footer должны быть единственными на странице, а section может бесконечно повторяться.
Как строится DOM-дерево
Для описания структуры DOM потребуются термины: корневой, родительские и дочерние элементы. Корневой элемент находится в основании всей структуры и не имеет родительского элемента. Дочерние элементы не просто находятся внутри родительских, но и наследуют различные свойства от них. На картинке ниже изображено DOM-дерево.
Корневой элемент здесь html — без него страница не будет скомпилирована. Он не имеет родительского (вышестоящего) элемента, но имеет два наследника или дочерних элемента — head и body.
По отношению друг к другу элементы head и body являются сиблингами (братьями и сестрами). В каждый из них можно вложить еще много дочерних элементов. Например, в head обычно находятся link, meta, script или title.
Все эти теги не являются уникальными, и в одном документе может быть по несколько экземпляров каждого из них.
В body могут находиться разнообразные элементы. Например, в родительском body — дочерний элемент header, в элементе header — дочерний элемент section, в родительском section — дочерний div, в div — элемент h3, и наконец, в h3 — элемент span. В этом случае span не имеет дочерних элементов, но их можно добавить в любой момент.
Можно описать это так:
А если бы система была бы более разветвленная и с большим количеством вложений — так:
На схеме изображено довольно большое DOM-дерево, и его сложно воспринимать из-за его размера. Для удобства часто используется система многоуровневых списков. Например, предыдущее дерево можно преобразовать в такой список:
Если преобразовать дерево на предыдущем рисунке в код, то получится так:<HTML> <head> <link> <link> <link> <meta> <meta> <title></title> </head> <body> <header> <div> <h3></h3> </div> <div> <h4> <span></span> </h4> </div> <div> <p></p> </div> <div> <img> </div> </header> <section> <div> <h3></h3> <p> <span></span> </p> </div> <div> <p> <span></span> </p> <img> <p></p> <div> <img> <iframe></iframe> </div> </div> </section> <footer> <div> <img> <p></p> </div> <div> <h6></h6> </div> </footer> </body> </HTML>
Как видно из кода, некоторые теги должны закрываться, а некоторые — нет.
Эту схему важно понимать, чтобы разобраться с темой наследования свойств. Элементы могут наследовать не все, но многие свойства своих родителей — например, цвет, шрифт, видимость и т.д.
Таким образом, чтобы задать стиль шрифта на всей странице, потребуется не прописывать цвет для каждого элемента, а задать его только для body. А чтобы изменить наследуемое свойство у дочернего элемента, нужно прописать только ему новые свойства. Наследование удобно для создания единообразной страницы.
Зачем нужно знать, как строится DOM-дерево?
Большинство действий при работе с DOM сводится к поиску нужных элементов. Не понимая, как строится DOM-дерево, и не зная, каковы связи между узлами, найти нужный элемент будет сложно.
Как просмотреть DOM-дерево?
В любом браузере есть инструменты, с помощью которых можно отобразить DOM-дерево. Если выбрать какой-либо объект в структуре, он будет подсвечен на странице. При этом для него будут выведены свойства CSS, которые работают сейчас, и те, которые не задействованы.
Чтобы посмотреть DOM в браузере, нужно зайти в инструменты разработчика. В большинстве браузеров для этого надо нажать на F12 — тогда откроется дополнительная панель с вкладками и зонами.
На изображении выше во вкладке Elements представлена структура DOM в виде многоуровневого вложенного списка. Каждый элемент можно открыть и посмотреть, что у него внутри, его расположение на странице и размеры этого элемента со всеми отступами.
Также там находятся другие инструменты — например консоль, где выводится информация об ошибках и куда можно ввести необходимые данные, например для отладки (исправления ошибок в коде).
Панель ресурсов отображает подключенные ресурсы — это шрифты, изображения, JavaScript- и CSS-файлы.
0 комментариев