Что такое DOM? Введение для непрограммистов

Последнее обновление Июл 12, 2021

Содержание

Модель ДОМА: Сохранение интереса в Интернете

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

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

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

Прежде чем начать, вы уже должны быть знакомы с основами HTML, CSS и JavaScript.

Что такое DOM?

Объектная модель документа (DOM) – это программный интерфейс для HTML. Он переводит содержимое HTML-документа в стандартизированный объект, к которому функциональные языки программирования, такие как JavaScript, могут легко получить доступ и изменить. Поскольку большинство событий веб-страниц управляются кодом, отличным от HTML, все динамические веб-страницы полагаются на DOM для правильного отображения и работы.

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

Что такое объект?

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

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

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

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

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

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

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

Зачем нам DOM

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

Обратите внимание, что его части также структурированы в иерархию. Тег действует как самый верхний «дом» в нашем примере. Внутри нашего HTML-дома у нас есть теги и , которые похожи на наши комнаты. Наконец, есть наиболее конкретные элементы:

, <h1>, <h2>, </h2></h1>, <img> и <button>. Думайте об этом как о предметах для конкретной комнаты, например, о кровати и лампе.</button> Элементы в документе HTML структурированы таким образом по той же причине, что и объекты: иерархическая структура помогает компьютерным программам читать и обрабатывать информацию. В случае HTML ваш веб-браузер – это программа, а языки сценариев, такие как JavaScript, изменяют и модифицируют HTML-код. Но есть проблема. Сами по себе HTML-документы не являются объектами. Они не могут быть прочитаны JavaScript без какого-либо преобразования файла в объект. Здесь на помощь приходит модель DOM. DOM представляет весь HTML-документ как единый объект. Для создания модели DOM веб-браузер, читающий файл HTML, принимает все его части, от корневого элемента до самых маленьких тегов , и выводит их как объект, который понимает JavaScript. Слово «представлять» здесь важно. Модель DOM не является копией файла HTML – это просто другой способ организации информации HTML в веб-браузере. Способ создания модели DOM браузером аналогичен тому, как он создает веб-страницу. Когда вы открываете любую страницу в своем браузере, вы видите визуальное представление браузером нижележащего HTML. Вы просматриваете тот же контент, но организованный как страницу, которую ваш мозг может легко понять. DOM – это еще один способ представления HTML вашим браузером. В DOM HTML организован в объект, который JavaScript может легко понять. Помните мой предыдущий пример дерева? Вот как DOM представит наш простой HTML-файл как объект, дружественный к JavaScript: <a href="https://themewp.inform.click/wp-content/uploads/2020/12/post-17708-5fe8a678cfcdf.png" data-rel="lightbox"><img decoding="async" class="SDStudio-light-box-enable SDStudio-editor-tools-md-imp" src="" data-src="https://themewp.inform.click/wp-content/uploads/2020/12/post-17708-5fe8a678cfcdf.png" alt="Что такое DOM? Введение для непрограммистов"></a> Прежде чем продолжить, следует отметить еще одну вещь: модель DOM не является специфической для JavaScript. Любой язык программирования (например, Python, C ++) может использовать DOM для изменения веб-страниц. Однако JavaScript влияет на большинство страниц, которые мы видим в Интернете, поэтому это единственный язык программирования, который вам нужно знать, чтобы понимать DOM. Мы обсудили дома, браузеры и перевернутые деревья … но какое это имеет отношение к созданию веб-сайтов? <h2>Что такое DOM в веб-дизайне?</h2>  В веб-дизайне JavaScript используется для управления поведением веб-страниц. Модель DOM связывает JavaScript с исходным кодом HTML, что позволяет JavaScript выполнять свои функции с отдельными элементами HTML. Это взаимодействие JavaScript-HTML создает впечатление интерактивного веб-дизайна. Объекты не только хороши для организации данных, но и позволяют программам легко получать доступ к определенным фрагментам данных внутри них. Возвращаясь к нашему объекту house, допустим, вы хотите отредактировать элемент «kitchen_countertop» конкретного дома. Для этого вашей программе просто нужно найти рассматриваемый дом, пройти вниз по дереву объектов до кухонного объекта, а затем изменить элемент «kitchen_countertop» с «кварца» на «мрамор». Хороший выбор. Таким же образом DOM предоставляет JavaScript доступ почти ко всем элементам HTML-документа, от всей страницы до короткой строки текста. Каждый раз, когда что-то происходит на веб-странице после загрузки страницы (например, нажатие кнопки отправляет форму или элемент меняет размер / цвет), этот код JavaScript нацелен на конкретный элемент через DOM и вносит изменения. Код JavaScript может находиться в собственном файле .js или даже в самом HTML-документе. Чтобы <a href="https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_show" target="_blank" rel="noopener nofollow" class="external external_icon">увидеть</a> базовый пример DOM в действии, попробуйте эту <a href="https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_show" target="_blank" rel="noopener nofollow" class="external external_icon">демонстрацию от W3Schools</a>. Левая панель содержит исходный код, а правая панель показывает код, отображаемый в виде веб-страницы. В тот момент, когда вы нажмете Click me!, выполняется следующий код JavaScript. <pre><code>document.getElementById('demo').style.display='block' </code></pre> В приведенном выше коде: <ul> <li>document – это способ JavaScript нацеливать объект HTML-файла через DOM. Он сообщает браузеру: «Я хочу войти в HTML-файл, чтобы внести изменения».</li> <li>.getElementByID (‘demo’) нацелен на элемент страницы с идентификатором demo. Это элемент, который JavaScript хочет изменить. Чтобы добраться туда, JavaScript начинается с самого верхнего тега , затем проходит через DOM, пока не встретит элемент с текстом «Hello JavaScript!»</li> <li>.style.display = ‘block’ – это действие. Как только целевой элемент найден, он показывает текст.</li> </ul> Сложные веб-страницы выполняют эти вызовы сотни раз, когда пользователи взаимодействуют с ними. JavaScript использует DOM каждый раз. <h2>Модель ДОМА: Сохранение интереса в Интернете</h2>  Надеюсь, вы понимаете, почему объектная модель документа так важна для современных веб-сайтов. Без него JavaScript не смог бы круто изменять веб-страницы – у нас было бы просто множество скучных статических веб-страниц. Вам никогда не придется беспокоиться о программировании DOM самостоятельно, поскольку веб-браузер делает всю работу за вас. Тем не менее, пробуете ли вы новые эффекты страницы перед <a href="https://themewp.inform.click/zachem-menjat-dizajn-veb-sajta/" title="редизайном веб-сайта">редизайном веб-сайта</a>, полезно знать внутреннюю работу вашего онлайн-присутствия на случай, если вам нужно быстро отладить, или если вы просто хотите знать, что на самом деле происходит под капот. Источник записи: <a href="https://blog.hubspot.com/website/dom-web-design" target="_blank" rel="noopener nofollow" class="external"></a><a href="https://blog.hubspot.com" target="_blank" rel="noopener nofollow" class="external external_icon">https://blog.hubspot.com</a> <aside><div class="afxshop afxshop-grid " data-col="3"> <ul class="afxshop-list "> </ul> </div> </aside>