Манипулирование DOM
Ранее вы видели, что фреймворки JavaScript упрощают получение определенных элементов с помощью селекторов и обхода DOM . Однако, чтобы изменить содержимое и внешний вид определенных элементов на веб-странице, вам необходимо манипулировать DOM и применить изменения. Использование чистого JavaScript потребовало бы большой работы, но, к счастью, большинство фреймворков JavaScript предоставляют полезные функции, которые упрощают это.
Предположим, у вас есть ящик с идентификатором the-box.
<div id="the-box">Здесь будет сообщение</div>
Используйте jQuery, чтобы изменить его текст на «Сообщение идет сюда», что можно легко использовать следующим образом:
$('#the-box').html('Это новое сообщение!');
Фактически, вы можете использовать HTML-код в функциях, и он будет анализироваться браузером, например:
$('#the-box').html('Это <strong>новое</strong> сообщение!');
В этом примере содержимое элемента DIV выглядит следующим образом:
<div id="the-box">Это <strong>новое</strong> сообщение!'</div>
Конечно, в примере вам нужно использовать специальные символы, такие как «больше» или «меньше», а не указывать специальные коды объектов HTML. Вместо этого вы можете использовать текстовую функцию jQuery:
$('#the-box').text('300 >200');
Код после обновления элемента div выглядит следующим образом:
<div id="the-box">300 > 200</div>
В приведенном выше примере существующий контент заменяется новым. Что, если вы просто хотите добавить в текст некоторую информацию? К счастью, jQuery предоставляет для этой цели функцию добавления.
$('#the-box').append(', вот сообщение');
После выполнения вышеуказанных операций с исходным элементом div содержимое элемента div выглядит следующим образом:
<div id="the-box">Здесь идет сообщение, здесь идет сообщение</div>
Вместо добавления вы можете добавить контент в начало, вставив его перед существующим контентом, а не после него. Кроме того, jQuery предоставляет функции для вставки содержимого в данный элемент до или после. Существуют также функции для замены контента, очистки контента, удаления элементов, клонирования элементов и т. д.
Помимо функций манипулирования DOM, фреймворки JavaScript обычно содержат несколько функций для управления стилями и классами элементов. Например, у вас есть таблица, в которой строка выделяется при наведении на нее курсора мыши. Вы можете создать специальный класс с именем hover, который можно будет динамически добавлять в строку. Используя YUI, вы можете использовать следующий код, чтобы определить, имеет ли строка имя класса наведения. Если оно есть, оно будет проигнорировано. Если нет, оно будет добавлено.
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
Аналогично, большинство фреймворков JavaScript имеют встроенные функции для управления CSS.