Как правило, после изучения основ HTML и CSS для структурирования и оформления веб-страницы начинающий веб-разработчик начинает погружаться в Javascript. Предполагая, что их введение в Javascript является надежным, они, вероятно, обсудят некоторые простые структуры данных, такие как массивы и объекты. Для большинства людей эти вводные шаги подойдут, но выбранный онлайн-учебник быстро бросает им вызов. Чтобы сделать веб-страницу отзывчивой, необходимо вовремя отредактировать представление браузера HTML и CSS, используя Javascript. Нетрудно представить себе несколько причин, по которым вы можете это сделать: например, загрузка новой фотографии профиля, твит или ретвит или лайк чьему-то сообщению и просмотр приятной анимации, когда значок маленького сердца становится красным. Чтобы помочь нам в наших усилиях, нам придется ввести понятие, которое является источником частых головных болей для многих… DOM.
DOM, или объектная модель документа, представляет собой интерпретацию браузером HTML на данной странице и связанных с ней CSS-файлов. Чтобы изменить свойства веб-страницы, не редактируя файлы вручную и не требуя обновления, можно динамически изменить DOM с помощью Javascript. К сожалению, Javascript, язык программирования, не понимает синтаксиса HTML, языка разметки. Поэтому нужен посредник. Используя интернет-магию, браузер считывает HTML-документ, который вы ему загружаете, и создает модель DOM — Javascript-представление содержимого HTML в виде гигантского объекта или объектов Javascript.
Этот:
Становится так:
и вдруг мы в деле.
Итак, в чем разница? Что ж, DOM — это Javascript и, как мы уже говорили, называется «Модель документа Object». Поэтому DOM представлена как объект Javascript, живущий в памяти компьютера, а не как статический текст. В нашем простом примере тело нашей веб-страницы может быть представлено в памяти следующим образом:
Каждый квадрат на нашей диаграмме можно рассматривать как лист на ветке, представленный линией, на которой он сидит. В каждом листовом узле отделяется одна или несколько ветвей, создавая больше листьев на нашем дереве. Лист, на котором откололись ветки, будет называться «родителем» листьев на отколовшихся ветвях. Поскольку Document — это узел без какого-либо родителя, мы называем его корнем или иногда стволом. Затем, чтобы получить доступ к любому другому свойству в DOM, нам просто нужно знать отношения родитель-потомок наших ветвей. Вызов document.children даст нам дочерние элементы head и body в структуре, похожей на массив [head, body] , а вызов body.parentNode вернет нам узел «ствола» документа.
Навигация по DOM так же проста, как создание мысленного образа выше с помощью написанного вами HTML, и помня, что, когда вы изменяете свойства в DOM с помощью Javascript, на вашем дереве будут расти новые листья, новые ветви, а листья будут падать или даже изменить цвет, то есть изменить свойства. Ментальная метафора здесь ключевая, и DOM быстро станет проще, как только вы привыкнете представлять свой документ таким образом.
