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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете получить доступ к узлам документа, ссылаясь на элементы по имени, например и . CSS также может обращаться к элементам напрямую, ссылаясь на имена class и id . Стиль класса применяется к нескольким элементам, поэтому вы можете стилизовать их все одновременно. И наоборот, стиль 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 все равно будет там, обеспечивая согласованный интерфейс между код и то, что отображается в браузере.

.

Оцените статью
oilgasindustry.ru
Добавить комментарий