Возможность использовать JavaScript для изменения, отображаемого в браузере, стала доступна благодаря одной основной детали. Заключается она в том, что каждый HTML-тег, правило стиля и другие относящиеся к странице компоненты также представлены и в DOM.
Чтобы наглядно изобразить все сказанное, предположим, что у нас есть элемент изображения, определенный в разметке:
<img src="images/lol_panda.png" alt="Sneezing Panda!" width="250"
height="100"/>
Когда браузер считывает документ и доходит до этого элемента, он создает узел в DOM, который представляет его, как это показано на рис. 26.1.
Это представление в DOM дает нам возможность делать все, что мы могли делать в разметке. На деле оказывается, что представление DOM позволяет производить даже больше действий в отношении HTML-элементов, чем при использовании самой разметки. Этого мы в некоторой степени коснемся в текущей главе и существенно серьезнее рассмотрим в дальнейшем. Причина такой гибкости HTML-элементов при их рассмотрении через DOM кроется в том, что они имеют много общего с обычными объектами JavaScript. Наши элементы DOM содержат свойства, позволяющие получать и устанавливать значения и вызывать методы. Они имеют форму наследования, рассмотренную нами несколько ранее, при которой функциональность, предоставляемая каждым элементом DOM, распространяется по базовым типам Node, Element и HTMLElement (рис. 26.2).
Рис. 26.1. Все наши HTML-элементы в итоге будут иметь представление в DOM
Рис. 26.2. Иерархия элементов представления, с которыми мы обычно сталкиваемся в HTML
Наверняка элементы DOM даже пахнут, как Object, когда забегают в дом после прогулки под дождем.
Несмотря на все схожести, в связи с требованием закона и в целях сохранения ментального здоровья я должен предоставить следующий дисклеймер: DOM разрабатывалась не для того, чтобы имитировать принцип работы объекта. Многое из того, что мы можем делать с объектами, мы определенно можем делать и с DOM, но это лишь потому, что поставщики браузеров обеспечили такую возможность. Спецификации W3C не предписывают DOM вести себя в точности так, как компоненты ведут себя при работе с обычными объектами. Хоть я бы и не стал об этом особо волноваться, но если вы когда-нибудь решите расширить элементы DOM или произвести более продвинутые действия, связанные с объектами, то обязательно выполните тесты во всех браузерах, просто чтобы убедиться, что все работает, как вам надо.
Теперь, когда это нескладное обсуждение позади, давайте уже начнем именно модифицировать DOM.
Пора модифицировать элементы DOM
Несмотря на то что мы определенно можем откинуться на стуле и освоить изменения элементов DOM в пассивном режиме, это один их тех случаев, когда будет интереснее рассмотреть тему, следуя за одним простым примером. Если вы не против, то будем использовать следующий HTML в качестве песочницы для отработки изучаемых техник:
<!DOCTYPE html>
<html>
<head>
<title>Hello…</title>
<style>
highlight {
font-family: "Arial";
padding: 30px;
}
summer {
font-size: 64px;
color: #0099FF;
}
</style>
</head>
<body>
<h1 id="bigMessage" class="highlight summer">What's happening?</h1>
<script>
</script>
</body>
</html>
Просто поместите весь этот код в HTML-документ и следуйте дальнейшим указаниям. Если просмотреть этот HTML в браузере, то вы увидите изображение, аналогичное рис. 26.3.
Рис. 26.3. Что происходит?
На самом деле происходит не так уж много. Основная часть содержимого — это тег h1, отображающий текст What’s happening?:
<h1 id="bigMessage" class="highlight summer">What's happening?</h1>
Теперь если переключиться на обзор с позиции DOM, то на рис. 26.4 можно увидеть, как выглядит текущий пример при отображении всех HTML-элементов и узлов вроде document и window.
Рис. 26.4. Так выглядит структура DOM нашего примера
В ближайших разделах мы рассмотрим кое-какие возможности модифицирования элементов DOM.
Изменение значения текста элемента
Начнем с самого простого. Многие HTML-элементы могут отображать текст. Примером таких элементов являются заголовки, абзацы, разделы, вводные данные, кнопки и многое другое. У всех них есть одна общая деталь, а именно то, что изменение значения текста вы производите, устанавливая свойство textContent.