Примечание. В этом посте предполагается, что вы знакомы с концепциями объектно-ориентированного программирования.

Привет, граждане интернета. Если вы новичок в мире веб-разработки, вы наверняка сталкивались с термином DOM (мир объектов документа). Интересно, что такое ДОМ? Итак, давайте рассмотрим, что такое объектная модель документа.

Что такое объектная модель документа?

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

Давайте посмотрим пример.

<!DOCTYPE html>
<html>
   <body>
     <h2>This is heading</h2>
     <p id="demo"></p>
     <script>
        document.getElementById("demo").innerHTML = "Hello    World!";
     </script>
 </body>
</html>

В этом примере мы меняем содержимое элемента ‹p› на id="demo".

В приведенном выше примере getElementById — это метод, а innerHTML — свойство.

Итак, теперь я понимаю, что DOM представляет каждый элемент HTML-документа как объект. Но ждать. Почему появился DOM?

Вы знаете, что эти теги (‹p›‹/p›) HTML являются проблемой для javascript. Дайте тег javascript, и javascript будет похож на эй, стоп! Что ты делаешь, чувак? Я не понимаю эти теги, дайте мне объекты.

Вот именно, вы все правильно поняли. Javascript не понимает теги HTML. Javascript работает только с объектами. Вот почему ДОМ появился. Так что javascript может манипулировать документом.

Теперь вы знаете, что такое ДОМ.

Так что это конец здесь.

До свидания.

Первоначально опубликовано на http://developerxon.com 6 февраля 2022 г.