Знакомьтесь с объектной моделью документа
То, что отображается в вашем браузере, является веб-документом. Если говорить более конкретно, суммируя материал предыдущих разделов, то вы видите то, что сформировано взаимодействием HTML, CSS и JavaScript. Если еще немного углубиться, то изнутри действует иерархическая структура, которую ваш браузер использует, чтобы разобраться во всем, что происходит.
Эта структура известна как объектная модель документа. Друзья зовут ее просто DOM. На рис. 24.3 показан упрощенный вид DOM для нашего предыдущего примера.
Рис. 24.3. DOM для всего HTML, приведенного в начале главы, выглядит примерно так
Несмотря на простоту, нужно разобрать кое-какие вещи, применимые ко всем структурам DOM. В действительности DOM кроме HTML содержит и многие другие компоненты. Все эти компоненты более широко известны как узлы.
Эти узлы могут быть элементами (что не должно вас удивлять), атрибутами, текстом, комментариями, документным материалом и чем-то еще, о чем вы даже и не задумываетесь. Эта деталь может быть для кого-то и важна, но не для нас с вами. Практически всегда единственным интересующим нас узлом будет элемент, так как именно с ними мы будем иметь дело в 99 % случаев. Хотя на скучном техническом уровне узлы по-прежнему играют определенную роль в нашем сконцентрированном на элементе представлении.
Каждый HTML-элемент, к которому вы хотите обратиться, имеет конкретный, ассоциированным с ним тип. Все эти типы расширяют основу Node (узел), которая представляет их все, как показано на рис. 24.4.
Рис. 24.4. Структурное расположение элементов, которые мы обычно видим
Ваши HTML-элементы находятся в конце цепочки, которая начинается с узла и продолжается Element и HTMLElement, заканчиваясь типом (HTMLDivElement, HTMLHeadingElement и т. д.), совпадающим с самим элементом. Свойства и методы, используемые для управления HTML-элементами, представлены в одной из частей этой цепочки.
Прежде чем перейти к использованию DOM для модифицирования HTML-элементов, давайте сначала поговорим о двух особых объектах, которые встают у нас на пути.
Объект window
В браузере основой всей иерархии выступает объект window, который содержит много свойств и методов, помогающих в работе (рис. 24.5).
Рис. 24.5. Window — это весьма значимый компонент процесса
Действия, которые вы можете совершать с помощью объекта window, включают обращение к текущему URL, получение информации о любых рамках страницы, использование локального хранилища, просмотр информации об экране, работу с полосой прокрутки, установку текста строки состояния и различные другие действия, применимые к контейнеру, в котором отображена страница.
Объект document
Теперь мы переходим к объекту document, выделенному на рис. 24.6. Здесь уже будет поинтереснее, и именно на нем мы будем фокусироваться.
Рис. 24.6. Объект document — тоже по-своему важный компонент
Объект document определяет доступ ко всем HTML-элементам, составляющим отображение. Важная деталь, которую нужно помнить (и которая станет более ясна в последующих главах), — это то, что объект document не просто представляет версию HTML-документа только для чтения. Здесь предусмотрено двухстороннее взаимодействие, при котором вы можете не только считывать документ, но также и манипулировать им по своему усмотрению.
Любые изменения, производимые вами в DOM через JavaScript, отражаются на том, что показывается в браузере. Это значит, что вы можете динамически добавлять элементы, удалять их, перемещать, изменять их атрибуты, устанавливать встроенные стили CSS и выполнять различные другие выкрутасы. За исключением самого основного HTML-кода, необходимого в виде тега script для запуска JavaScript-кода в HTML-документе, вы можете построить полноценную страницу, используя исключительно JavaScript, если вам того захочется. При правильном использовании это очень мощная возможность.
Другой аспект импорта объекта — document связан с событиями. Я поясню детали вкратце, но если вы хотите использовать реакцию на наведение или клик мыши, отметку в графе для галочки, обнаружение, когда была нажата клавиша, и т. д., то будете полагаться на функциональность, предоставляемую объектом document для прослушивания событий и реагирования на них.