С начала века веб-сайты прошли долгий путь. То, что когда-то было набором базовых текстовых страниц, превратилось в сеть тщательно продуманных интерфейсов, дополненных такими элементами, как адаптивные кнопки, параллаксная прокрутка и персонализированный контент.
Но как эти функции веб-дизайна воплощаются в жизнь? Вот тут-то и появляется объектная модель документа ( DOM ). В этом руководстве мы объясним, что такое DOM и почему он является ключевым компонентом просмотра веб-страниц.
Прежде чем приступить к работе, вы уже должны быть знакомы с основами HTML, CSS и JavaScript .
Объектная модель документа (DOM) — это программный интерфейс для HTML. Он преобразует содержимое HTML-документа в стандартизированный объект, к которому языки функционального программирования, такие как JavaScript, могут легко получить доступ и изменить его. Поскольку большинство событий веб-страницы управляются кодом, отличным от HTML, все динамические веб-страницы полагаются на DOM для правильного отображения и функционирования.
Чтобы лучше понять, почему DOM полезен, давайте сначала обсудим, что означает «объект» в компьютерном программировании.
Что такое объект?
Вкратце, конечная задача компьютерного программного обеспечения — выполнение действий с данными. Данные бывают самых разных типов: числа, символы и слова, и это лишь некоторые из них.
Чем больше делает программа, тем больше данных ей необходимо обработать и обработать. Без масштабируемой, организованной системы для этого возрастающая сложность приведет к ошибкам. Никто не любит ошибки.
Итак, для организации связанных фрагментов данных программисты используют тип данных, называемый объектом . Объекты отличаются от других типов данных, поскольку их целью является хранение других данных. Объект содержит связанные фрагменты данных, объединенные общей концепцией и хранящиеся в иерархии.
Вот пример: предположим, вы создаете программу, хранящую информацию о домах. В реальной жизни дома содержат множество вещей — комнаты, мебель, технику и людей, не говоря уже о другой важной информации, такой как район, адрес и количество этажей.
Если вы хотите представить переменную дома в программе, не имеет смысла хранить все эти данные, связанные с домом, отдельно. Вместо этого вы можете создать объект «дом» для каждого дома в системе и поместить в него все предметы дома. «Дом» может содержать данные всей информации, которую мы описали выше, и многое другое.
Вы даже можете помещать объекты внутрь других объектов. В нашем примере объект дома может содержать объекты «комнаты». Вы можете обозначить один объект комнаты как кухню, которая сама может содержать данные о бытовой технике, материале столешницы и т. д.
Главный вывод здесь заключается в том, что объекты группируют данные логическим иерархическим образом. Чтобы лучше это понять, полезно представить себе такой объект, как дерево. Ну, больше похоже на перевернутое дерево. Имя объекта похоже на «корень» дерева, а все его ветви — на хранящиеся внутри него данные. Вот дерево для визуализации нашего объекта дома:
Зачем нам нужен DOM
Прежде чем я увлекусь планированием своего особняка, давайте снова свяжем эту концепцию объекта с HTML. Взгляните на этот базовый HTML-файл:
Обратите внимание, что его части также структурированы в иерархию. Тег <html> в нашем примере действует как самый верхний «дом». Внутри нашего «дома» HTML у нас есть теги <head> и <body>, которые напоминают наши комнаты. Наконец, есть самые специфические элементы: <title>, <h1>, <h2>, <p>, <img> и <button>. Думайте об этом как о предметах, предназначенных для конкретной комнаты, например, о кровати и лампе.
Элементы в HTML-документе структурированы таким образом по той же причине, что и объекты: иерархическая структура помогает компьютерным программам читать и обрабатывать информацию. В случае HTML ваш веб-браузер — это программа, а языки сценариев, такие как JavaScript, изменяют и модифицируют HTML-код.
Но есть проблема. HTML-документы сами по себе не являются объектами. Они не могут быть прочитаны с помощью JavaScript без какого-либо преобразования файла в объект. Здесь на помощь приходит DOM.
DOM представляет весь HTML-документ как один объект. Чтобы создать DOM, веб-браузер, читающий HTML-файл, берет все его части, от корневого элемента <html> до самых маленьких тегов <span>, и выводит их как объект, понятный JavaScript.
Слово «представлять» здесь важно. DOM не является копией HTML-файла — это просто другой способ организации HTML-информации в веб-браузере.
Способ, которым браузер создает DOM, аналогичен тому, как он создает веб-страницу. Когда вы открываете любую страницу в браузере, вы видите визуальное представление браузера базового HTML. Вы просматриваете тот же контент, но организованный в виде страницы, которую ваш мозг может легко понять. DOM — это еще один способ представления HTML вашим браузером. В DOM HTML организован в объект, который легко понять JavaScript.
Помните мой пример с деревом ранее? Вот как DOM будет представлять наш простой HTML-файл как объект, поддерживающий JavaScript:
Прежде чем мы продолжим, следует отметить еще одну вещь: DOM не является специфичным для JavaScript. Любой язык программирования (например, Python, C++) может использовать DOM для изменения веб-страниц. Однако JavaScript влияет на большинство страниц, которые мы видим в Интернете, поэтому это единственный язык программирования, который вам нужно знать, чтобы понимать DOM.
Мы обсудили дома, браузеры и перевернутые деревья... но какое отношение все это имеет к созданию веб-сайтов?
Что такое DOM в веб-дизайне?
В веб-дизайне JavaScript используется для управления поведением веб-страниц. DOM связывает JavaScript с исходным HTML-кодом, что позволяет JavaScript выполнять свои функции над отдельными элементами HTML. Это взаимодействие JavaScript-HTML создает опыт интерактивного веб-дизайна.
Объекты не только хороши для организации данных, но и позволяют программам легко получать доступ к определенным фрагментам данных внутри них.
Возвращаясь к нашему объекту дома, предположим, вы хотите отредактировать элемент «kitchen_countertop» конкретного дома. Для этого вашей программе просто нужно найти рассматриваемый дом, пройти вниз по дереву объектов к объекту кухни, а затем изменить элемент «kitchen_countertop» с «кварц» на «мрамор». Хороший выбор.
Точно так же DOM предоставляет JavaScript доступ практически к каждому элементу HTML-документа, от всей страницы до короткой строки текста.
Всякий раз, когда что-то происходит на веб-странице после загрузки страницы (например, нажатие кнопки отправляет форму или элемент меняет размер/цвет), это код JavaScript, нацеленный на определенный элемент через DOM и вносящий изменения. Код JavaScript может находиться в отдельном файле .js или даже в самом HTML-документе.
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
Левая панель содержит исходный код, а правая панель показывает код, отображаемый в виде веб-страницы. В тот момент, когда вы нажимаете «Нажми на меня!» , запускается следующий JavaScript.
document.getElementById('demo').style.display='block'
В приведенном выше коде:
- document — это способ JavaScript направить объект HTML-файла через DOM. Он сообщает браузеру: «Я хочу войти в HTML-файл и внести изменения».
- .getElementByID('demo') нацелен на элемент страницы с идентификатором «demo». Это элемент, который JavaScript хочет изменить. Чтобы достичь этого, JavaScript начинается с самого верхнего тега <html>, затем проходит через DOM, пока не достигнет элемента с текстом «Hello JavaScript!»
- .style.display='block' — это действие. Как только целевой элемент найден, он отображает текст.
Сложные веб-страницы выполняют эти вызовы сотни раз, когда пользователи взаимодействуют с ними. JavaScript использует DOM каждый раз.
DOM: как сделать Интернет интересным
Надеюсь, вы понимаете, почему объектная модель документа так важна для современных веб-сайтов. Без него JavaScript не смог бы круто изменять веб-страницы — у нас было бы просто множество скучных, статичных веб-страниц.
Вам никогда не придется беспокоиться о программировании DOM самостоятельно, поскольку веб-браузер сделает всю работу за вас. Тем не менее, независимо от того, пробуете ли вы новые эффекты страницы перед редизайном веб-сайта , полезно знать внутреннюю работу вашего присутствия в Интернете на случай, если вам понадобится быстрая отладка или вы просто хотите знать, что на самом деле происходит под капюшон.
