Скрытый герой веб-сайтов: понимание DOM
«DOM» – это термин, который часто используется в интерфейсном веб-дизайне и разработке. Это расшифровывается как «объектная модель документа», и это фундаментальная часть веб-сайтов.
Каким бы важным ни был DOM, многие люди этого не понимают. Фактически, вы можете программировать веб-сайты в течение многих лет, ничего не узнавая об этом. Но по мере развития интерфейсных технологий понимание DOM становится все более важным.
Понимание контракта DOM
В объектно-ориентированном программировании есть конструкция, называемая интерфейсом. Интерфейс сам по себе ничего не делает. Вместо этого он создает контракт. Он говорит, что все может взаимодействовать с чем угодно, если это следует правилам интерфейсного контракта.
Наличие интерфейса позволяет любой части программы взаимодействовать с любой другой частью программы контролируемым и предсказуемым образом. Интерфейс также позволяет одной части программы работать с любой другой частью, даже если она ничего не знает о той части программы, которая находится на другой стороне интерфейса.
Интерфейс похож на электрическую розетку в стене. Вашему устройству не нужно знать, откуда идет питание, если напряжение правильное. Трансформатору на углу не нужно знать, что он питает. Ему просто нужно подавать электричество нужного напряжения в ваш дом.
DOM – это слой интерфейса между веб-страницей и кодом, который ее создает и изменяет. Когда вы посещаете веб-сайт, вы видите, как браузер отображает DOM этого веб-сайта. Когда вы пишете HTML, вы фактически программируете с использованием API DOM (интерфейса программирования).
Стандарт DOM поддерживается организацией, называемой Консорциумом всемирной паутины или W3C. Они создали очень подробную документацию, определяющую стандарт DOM .
В этот момент вы можете подумать, что они не очень хорошо работают. В конце концов, существует так много проблем, связанных с кроссбраузерностью.
Проблема не в стандарте. Дело в самих браузерах. Многие браузеры добавили в свою реализацию DOM функциональность, которая не соответствует стандартам W3C. Иногда эта функция становится популярной и внедряется в стандарт DOM, заставляя другие браузеры наверстывать упущенное.
Другая проблема заключается в том, что некоторые люди до сих пор используют старые версии браузеров, в которые не встроен последний стандарт DOM. А иногда браузеры неправильно реализуют стандарт.
Как устроена DOM
Вы можете думать о DOM как о дереве. Элемент <html> – это ствол, а все элементы внутри него – это ветви. Когда вы вкладываете HTML-элементы внутрь родительского элемента, вы фактически создаете ответвления от этой ветви. Правильный термин для каждой ветви – «узел».
Древовидная структура создает логические отношения между узлами, как семейное древо. Каждый узел может иметь родителя и предков, от которых он разветвляется. У них могут быть братья и сестры. И у узлов могут быть дети и потомки. Размышление в этих терминах очень помогает при использовании JavaScript и CSS для взаимодействия с DOM.
Как HTML взаимодействует с DOM
Модель DOM определяется путем создания объекта документа с интерфейсом документа. Ваш HTML-код – это самый простой способ создать документ. HTML дает вам простой способ определить документ без необходимости выполнять традиционное программирование.
Если вы только начинаете работать с HTML, вот пять советов, которые помогут с ним ознакомиться .
HTML проще и снисходительнее, чем традиционные языки программирования. Это упрощает взаимодействие с DOM для начинающих веб-дизайнеров.
Как CSS взаимодействует с DOM
После того, как ваш HTML структурирует документ DOM, CSS может стилизовать этот документ. Для этого он должен быть в состоянии найти элементы, которые вы хотите стилизовать. Это происходит несколькими способами.
Вы можете получить доступ к узлам документа, ссылаясь на элементы по имени, например <div> и <p> . CSS также может напрямую обращаться к элементам, ссылаясь на имена классов и идентификаторов . Стиль класса применяется к нескольким элементам, поэтому вы можете стилизовать их все одновременно. И наоборот, стиль id применяет изменения только к одному элементу.
Вы также можете получить доступ к структуре генеалогического древа с помощью CSS и настроить доступ для большего контроля. Селекторы CSS позволяют вам выбирать несколько элементов и дают вам набор уловок для их поиска. Вы можете искать детей по их происхождению, сочетанию классов и многому другому.
Как JavaScript взаимодействует с DOM
JavaScript имеет наибольший контроль над документом, потому что JavaScript – это реальный язык программирования с объектами, управлением потоком, переменными и т. Д. DOM предоставляет несколько интерфейсов, которые позволяют JavaScript управлять документом, элементами и другими узлами.
JavaScript может добавлять и удалять узлы, а также изменять их стиль. И JavaScript может отслеживать события в документе, такие как наведение курсора мыши на элемент, щелчки и нажатия клавиш.
JavaScript может искать и перемещаться по дереву документа очень похоже на CSS. Он может находить элементы по идентификатору и классу. И он может получать списки дочерних элементов в виде массивов.
Будущее веб-разработки и DOM
Интернет сильно изменился с первых дней своего существования. Раньше JavaScript в основном использовался для специальных эффектов и простых отображений данных. Большинство веб-сайтов были не более чем цифровыми брошюрами. Однако AJAX все изменил.
AJAX позволяет веб-сайтам обновлять данные, отображаемые с сервера, на лету без перезагрузки страницы. До AJAX каждое изменение данных можно было увидеть только при перезагрузке страницы или переходе пользователя на другую страницу.
После AJAX веб-приложения становились все более популярными. Интернет больше не представляет собой набор простых статических веб-сайтов и нескольких приложений с высокой функциональностью, таких как eBay. Сейчас Интернет – это почти вторая операционная система, полная высокофункциональных приложений.
По мере роста ожиданий пользователей технологии должны идти в ногу со временем. JavaScript – не самый мощный и не самый быстрый язык. Он также страдает от ряда проблем, таких как ошибки чисел с плавающей запятой, которые делают его менее желательным для разработчиков. Здесь на помощь приходит WebAssembly.
WebAssembly предоставляет браузеру многие преимущества нативного кода, включая повышенную скорость и лучший доступ к оборудованию. Это позволит программистам использовать другие языки для создания веб-сайтов, таких как C ++ и Rust.
Но даже с огромными улучшениями, которые принесет WebAssembly, DOM все равно будет там, обеспечивая согласованный интерфейс между кодом и тем, что отображается в браузере.