JavaScript для детей — страница 25 из 48

a c

S r

c i

r p

i t

p

9

D O M И J Q U E RY

До сих пор мы использовали JavaScript для относительно простых

задач, вроде вывода текста в консоли браузера или отображения диа-

логов alert и prompt. Однако помимо этого JavaScript позволяет вза-

имодействовать с HTML-элементами на веб-страницах, меняя их пове-

дение и внешний вид. В этой главе мы поговорим о двух технологиях,

которые помогут вам писать гораздо более мощный JavaScript-код: это

DOM и jQuery.

DOM — это средство, позволяющее JavaScript-коду взаимодейство-

DOM —

вать с содержимым веб-страниц. Браузеры используют DOM для струк-

Document

турирования страниц и их элементов (параграфов, заголовков и т. д.),

Object Model —

объектная

а JavaScript может разными способами манипулировать элементами

модель

DOM. Например, скоро вы узнаете, как при помощи JavaScript-программы

документа

менять заголовки HTML-документов, подставляя туда значение, полу-

ченное из диалога prompt.

Также мы познакомимся с удобным инструментом под названием

jQuery, который кардинально упрощает работу с DOM. jQuery содержит

набор функций, которые позволяют найти нужные вам элементы и про-

извести с ними определенные действия.

В этой главе мы узнаем, как c помощью DOM и jQuery изменять суще-

ствующие элементы DOM, а также создавать новые, полностью контро-

лируя содержимое веб-страниц из JavaScript-кода. Также мы выясним,

как использовать jQuery для анимации элементов DOM — например, для

плавного появления и исчезновения изображений и текста.

145

Поиск элементов DOM

Когда вы открываете HTML-документ, браузер преобразовывает его

элементы в древовидную структуру — дерево DOM. На рис. 9.1 изобра-

жено простое дерево DOM — мы уже встречали его в пятой главе, когда

говорили об иерархии HTML. Браузер дает JavaScript-программистам

возможность доступа к этой древовидной структуре при помощи

специальных методов DOM.

</p><p><h1></p><p><p></p><p><i>Рис. 9.1. DOM-дерево простого HTML-документа, </i></p><p><i>наподобие созданного нами в пятой главе</i></p><p>Идентификация элементов по id</p><p>HTML-элементу можно присвоить уникальное имя, или <i>идентифи-</i></p><p><i>катор</i>, с помощью атрибута id. Например, у элемента h1 задан атри-</p><p>бут id:</p><p>Main</p><p><h1 id="main-heading">Привет, мир!</h1></p><p>heading —</p><p>главный</p><p>заголовок</p><p>Задав атрибуту id значение (в данном случае "main-heading"), мы</p><p>получаем возможность впоследствии найти этот конкретный заголовок</p><p>по его id и что-нибудь с ним сделать, не затрагивая остальные элементы,</p><p>даже если это другие заголовки уровня h1.</p><p>Поиск элемента с помощью getElementById</p><p>Обозначив элемент уникальным id (каждый id в документе должен</p><p>иметь собственное, отличное от других значение), мы можем восполь-</p><p>Get element</p><p>зоваться DOM-методом document.getElementById, чтобы найти эле-</p><p>by ID —</p><p>мент "main-heading":</p><p>получить</p><p>элемент по ID</p><p>var headingElement = document.getElementById("main-heading");</p><p>Вызовом document.getElementById("main-heading") мы даем</p><p>браузеру команду отыскать элемент, id которого равен "main-heading".</p><p>146 Часть II. Продвинутый JavaScript</p><p>Этот вызов вернет DOM-объект с соответствующим id, и мы</p><p>сохраним этот объект в переменной headingElement.</p><p>Когда элемент найден, им можно управлять при</p><p>помощи JavaScript-кода. Например, через свойство</p><p>innerHTML мы можем узнать, что за текст находится вну-</p><p>три элемента, или заменить этот текст:</p><p>headingElement.innerHTML;</p><p>Эта команда возвращает содержимое headingElement —</p><p>элемента, который мы нашли с помощью getElementById.</p><p>В данном случае содержимое — это текст "Привет, мир!",</p><p>находящийся между тегов <h1>.</p><p>Меняем текст заголовка через DOM</p><p>Вот пример того, как менять текст заголовка с помощью DOM. Давайте</p><p>создадим новый HTML-документ <i>dom.html</i> со следующим кодом:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><meta charset="UTF-8"></p><p><title>Изучаем DOM

Привет, мир!

В строке  мы с помощью document.getElementById

нашли элемент h1 (id которого равен «main-heading»)

и сохранили его в переменной headingElement. В стро-

ке  мы вывели в консоль строку, возвращенную вызовом

headingElement.innerHTML — то есть "Привет, мир!".

В строке  открыли диалог prompt, чтобы получить

от пользователя новый заголовок, и сохранили введенный

9. DOM и jQuery 147

пользователем текст в переменной newHeadingText. И наконец,

в строке  присвоили сохраненное в newHeadingText значение свой-

ству innerHTML элемента headingElement.

Открыв этот документ в браузере, вы должны увидеть диалог prompt,

как на рис. 9.2.

Рис. 9.2. Наша страничка с диалогом prompt

Введите в этом диалоге строку «JAVASCRIPT ЭТО ЗДОРОВО»

и нажмите «ОК». Заголовок должен тотчас поменяться — как на рис. 9.3.

Рис. 9.3. Наша страничка после смены заголовка

Обращаясь к свойству innerHTML, можно поменять содержимое

любого элемента DOM через JavaScript-код.

148 Часть II. Продвинутый JavaScript

Работа с деревом DOM через jQuery

Встроенные в браузер методы DOM всем хороши, но пользоваться ими

бывает нелегко, поэтому многие программисты применяют специаль-

ную библиотеку под названием jQuery.

jQuery — это набор инструментов (в основном функций), которые

сильно упрощают работу с DOM-элементами. Подключив эту библиотеку

к нашей страничке, мы сможем вызывать ее функции и методы в допол-

нение к функциям и методам, встроенным в JavaScript и в браузер.

Подключаем jQuery к HTML-странице

Прежде чем воспользоваться библиотекой jQuery, нужно, чтобы браузер

ее загрузил, для чего достаточно одной строки HTML-кода:

Src — source —

источник

Обратите внимание, что у тега 9. DOM и jQuery 149

В строке  мы добавили новый тег