Скрытый герой веб-сайтов: понимание DOM

«DOM» - это термин, который часто используется в интерфейсном веб-дизайне и разработке. Это расшифровывается как «объектная модель документа», и это фундаментальная часть веб-сайтов.

Каким бы важным ни был DOM, многие люди этого не понимают. Фактически, вы можете программировать веб-сайты в течение многих лет, даже не зная об этом. Но по мере развития интерфейсных технологий понимание DOM становится все более важным.

Понимание контракта DOM

В объектно-ориентированном программировании есть конструкция, называемая интерфейсом. Интерфейс сам по себе ничего не делает. Вместо этого он создает контракт. В нем говорится, что все может взаимодействовать с чем угодно, если это следует правилам интерфейсного контракта.

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

Интерфейс похож на электрическую розетку в стене. Вашему устройству не нужно знать источник питания, если напряжение правильное. Трансформатору на углу не нужно знать, что он питает. Ему просто нужно подавать электричество нужного напряжения в ваш дом.

DOM - это слой интерфейса между веб-страницей и кодом, который ее создает и изменяет. Когда вы посещаете веб-сайт, вы видите, как браузер отображает DOM этого веб-сайта. Когда вы пишете HTML, вы фактически программируете с использованием DOM API (интерфейса программирования).

Стандарт DOM поддерживается организацией под названием Консорциум World Wide Web, или W3C. Они создали очень подробная документация, определяющая DOM стандарт.

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

Проблема не в стандарте. Дело в самих браузерах. Многие браузеры добавили в свою реализацию DOM функциональность, которая не соответствует стандартам W3C. Иногда эта функциональность становится популярной и внедряется в стандарт DOM, заставляя другие браузеры наверстывать упущенное.

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

Как устроена DOM

Вы можете думать о DOM как о дереве. В элемент - это ствол, а все элементы внутри него - ветви. Когда вы вкладываете HTML-элементы внутрь родительского элемента, вы фактически создаете ответвления от этой ветви. Правильный термин для каждой ветви - «узел».

Древовидная структура создает логические отношения между узлами, как семейное древо. Каждый узел может иметь родителя и предков, от которых он разветвляется. У них могут быть братья и сестры. И у узлов могут быть дети и потомки. Эти термины очень помогают при использовании JavaScript и CSS для взаимодействия с DOM.

Как HTML взаимодействует с DOM

Модель DOM определяется путем создания объекта документа с интерфейсом документа. Ваш HTML-код - это самый простой способ создать документ. HTML дает вам простой способ определить документ без необходимости выполнять традиционное программирование.

Если вы только начинаете работать с HTML, вот пять советов по ознакомлению с ним.

5 шагов к пониманию базового HTML-кода

HTML - это основа каждой веб-страницы. Если вы новичок, позвольте нам провести вас через основные шаги к пониманию HTML.

HTML проще и снисходительнее, чем традиционные языки программирования. Это упрощает взаимодействие с DOM для начинающих веб-дизайнеров.

Как CSS взаимодействует с DOM

Как только ваш HTML структурирует документ DOM, CSS может стилизовать этот документ. Для этого он должен быть в состоянии найти элементы, которые вы хотите стилизовать. Это делается несколькими способами.

Вы можете получить доступ к узлам документа, ссылаясь на элементы по имени, например и. CSS также может обращаться к элементам напрямую, ссылаясь на учебный класс и я бы имена. Стиль класса применяется к нескольким элементам, поэтому вы можете стилизовать их все одновременно. И наоборот, стиль id применяет изменения только к одному элементу.

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

Как JavaScript взаимодействует с DOM

JavaScript имеет наибольший контроль над документом, потому что JavaScript - это реальный язык программирования с объектами, управлением потоком, переменными и т. Д. DOM предоставляет несколько интерфейсов, которые позволяют JavaScript управлять документом, элементами и другими узлами.

Связанный: Что такое JavaScript?

JavaScript может добавлять и удалять узлы, а также изменять их стиль. А JavaScript может отслеживать события в документе, такие как наведение курсора мыши на элемент, щелчок и нажатие клавиш.

JavaScript может искать и перемещаться по дереву документа очень похоже на CSS. Он может находить элементы по идентификатору и классу. И он может получать списки дочерних элементов в виде массивов.

Будущее веб-разработки и DOM

Интернет сильно изменился с первых дней своего существования. Раньше JavaScript в основном использовался для специальных эффектов и простых отображений данных. Большинство веб-сайтов были не более чем цифровыми брошюрами. Однако AJAX все изменил.

AJAX позволяет веб-сайтам обновлять данные, отображаемые с сервера, на лету, не перезагружая страницу. До AJAX каждое изменение данных можно было увидеть только при перезагрузке страницы или переходе пользователя на другую страницу.

После AJAX веб-приложения становились все более популярными. Интернет больше не представляет собой набор простых статических веб-сайтов и нескольких приложений с высокой функциональностью, таких как eBay. Сейчас Интернет - это почти вторая операционная система, полная высокофункциональных приложений.

По мере роста ожиданий пользователей технологии должны идти в ногу со временем. JavaScript - не самый мощный и не самый быстрый язык. Он также страдает от нескольких проблем, таких как ошибки чисел с плавающей запятой, которые делают его менее желательным для разработчиков. Здесь на помощь приходит WebAssembly.

WebAssembly предоставляет браузеру многие преимущества нативного кода, включая повышенную скорость и улучшенный доступ к оборудованию. Это позволит программистам использовать другие языки для создания веб-сайтов, таких как C ++ и Rust.

Но даже с огромными улучшениями, которые принесет WebAssembly, DOM по-прежнему будет там, обеспечивая согласованный интерфейс между кодом и тем, что отображается в браузере.

Как использовать Outlook в темном режиме

Снизьте нагрузку на глаза и увеличьте время автономной работы, переключив Microsoft Outlook в темный режим.

Об авторе