JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Пора модифицировать элементы 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.
