14. Объектная модель документа
Для JavaScript инструментом изменений на странице является DOM (Document Object Model) — объектная модель документа. Согласно DOM-модели, документ является иерархией. Большинство тегов являются родительскими и имеют теги-потомки. Те, в свою очередь, могут иметь своих потомков. Последний элемент заканчивается, как правило, текстом или картинкой. Если изобразить такую иерархию графически, то получится дерево.
Пример DOM-дерева
Рассмотрим такую страничку:
<html> <head> <title>О лосях</title> </head> <body> Правда о лосях. <ol> <li>Лось - животное хитрое</li> <li>.. И коварное</li> </ol> </body> </html>
Корневым элементом иерархии является html. У него есть два потомка: head и body. И так далее, каждый вложенный тег является потомком родительского тега.
Для манипуляций с DOM используется объект document.
Изменение содержимого парного тега
Свойство innerHTML ( inner — внутренний) содержит всё, что находится внутри контейнера парного HTML-элемента. Свойство innerHTML применяется для изменения содержания элемента. Например, прежний текст параграфа заменяется на новый:
<p id='изменяемый'>Раньше здесь был этот текст</p> <script type="text/javascript"> document.getElementById('изменяемый').innerHTML = 'Теперь текст стал таким' </script>
Мы уже говорили о том, что программисту приходится предусматривать проверку данных, вводимых пользователем. До сих пор мы выводили результат проверки либо через окно сообщения alert, либо в текстовое поле ввода input type='text'. Теперь мы можем выводить сообщение в любой тег.
Задание 1
Разместите на странице четыре текстовых поля: Логин, Пароль, Подтвердите пароль, E-mail и кнопку Отправить. При нажатии на кнопку должны проверяться наличие данных в каждом поле. При отсутствии данных справа должно выводиться соответствующая надпись.
Внешний вид
Задание 2
Доработайте предыдущий скрипт так, чтобы при вводе недостающих данных и повторном нажатии кнопки надпись пропадала.
Задание 3
Доработайте скрипт так, что если пароль не подтверждён, выводилась надпись «пароль не совпал»
Внешний вид
Создание нового HTML-элемента
Мы научились менять содержимое существующего тега. Но иногда необходимо создавать новый тег целиком. Например, чтобы добавить ранее не существовавшие пункты в список. Это делается в три этапа:
новый тег создаётся в оперативной памяти компьютера;
добавляется к уже существующим тегам;
наполняется содержимым.
Метод createElement (create — порождать) создаёт новый элемент в оперативной памяти компьютера. Пример: пункт = document.createElement("li") Аргумент метода — название создаваемого тега. Метод возвращает указатель на вновь созданный тег. Указатель необходимо сохранить в переменной. Созданный элемент существует только в оперативной памяти компьютера и не отображается на странице. Поэтому его теперь необходимо добавить к уже существующим тегам.
Метод appendChild добавляет дочерний элемент. Например, к списку добавляются новый пункт: <ul id="list"> <li>Первый пункт списка</li> </ul> <script type="text/javascript"> var пункт = document.createElement('li'); document.getElementById('list').appendChild(пункт); пункт.innerHTML = 'Второй пункт' </script>
|
Команда 1 |
|
Команда 2 |
|
Команда 3 |
Здесь первая команда создаёт в оперативной памяти компьютера новый пункт списка и сохраняет ссылку на него в переменной пункт. Вторая команда обращается к тегу списка и добавляет к нему вновь созданный пункт. Третья команда наполняет внутреннее содержание текстом Второй пункт. На рисунке показана последовательность создания нового пункта списка.
Задание 4
Разместите на странице нумерованный список из одного пункта, например, «Первый элемент». Поставьте кнопку «Добавить», по нажатию на которую добавляется новый пункт списка с текстом «Новый элемент списка».
Задание 5
Напишите скрипт, который по нажатию кнопки создаёт новый пункт списка с нумерацией, например, «Новый элемент 1», «Новый элемент 2» и так далее.