Работа с DOM-моделью и пользовательский интерфейс

Введение в DOM
DOM – Document Object Model:
My title
My link
My header
Элементы (Element), один из них - корневой
Атрибуты (Attribute)
Текстовые узлы (Text)

Работа с узлами в DOM
Есть несколько способов получить объект, представляющий узел, через
глобальный объект document или уже имея ссылку на другой узел:
Если узел имеет уникальный идентификатор (атрибут id), то узел
можно найти с помощью метода document.getElementById(id).
Можно найти массив элементов с заданными тегами с помощью
метода document.getElementsByTagName(tag).
Можно перейти от узла к его непосредственным потомкам
node.firstChild, node.lastChild или к предку
node.parentNode.
Можно перейти от узла к его соседям node.nextSibling,
node.previousSibling.

Пример страницы
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd"> lang="en">
Заголовок страницы
content="text/html;charset=windows-1251"/>
Это заголовок
А это - параграф со
ссылкой
внутри.
элемент списка
еще один элемент
третий элемент списка

Дерево элементов для этой страницы
html
head
body
title
h1
meta
p
meta
ul
a
li
li
li
Некоторые из элементов имеют
вложенные атрибуты и/или текст.

Полное дерево одного из элементов
p
a
А это
параграф со
внутри.
ссылкой
href=
"http://www.google.com/"
- элемент
- атрибут
- текстовый элемент
firstChild
parentNode
parentNode
nextSibling
nextSibling
previousSibling
lastChild
Если pNode – указатель на "p",
то заменим "ссылкой" на "звездой".
pNode.firstChild.nextSibling.
lastChild.nodeValue = "звездой";
change.html

Изменение структуры DOM страницы
Следующие методы применимы ко всем элементам DOM:
element.appendChild(node) – добавление нового узла в конец
списка "детей".
element.insertBefore(newNode, oldNode) – добавление
нового узла в список детей перед заданным.
element.removeChild(node) – удаление указанного узла из списка
"детей".
element.replaceChild(newNode, oldNode) – замена в списке
"детей" существующего элемента на новый.
Новый элемент (атрибут, текстовый узел) можно создать с помощью
следующих методов:
document.createElement(tag) – создание нового элемента с
заданным тегом.
document.createAttribute(name) – создание нового атрибута
с заданным именем.
document.createTextNode(data) – создание текстового узла.

Динамическое добавление узлов
insert.html
Добавим новый параграф сразу после заданного:
function insertNewParagraph() {
var pNode = document.getElementById('para');
var newPara = document.createElement('p');
var newText = document.createTextNode(
'А это динамически добавленный параграф!');
newPara.appendChild(newText);
pNode.parentNode.insertBefore(newPara, pNode.nextSibling);
}
body
h1
p id="para"
ul
p (newPara)
А это...

Отделение Javascript-кода от HTML
separate.html
Поместим теперь весь код полностью в отдельную javascript-страницу:
window.onload = initBody;
function initBody() {
var pNode = document.getElementById('para');
pNode.onclick = insertNewParagraph;
}
function insertNewParagraph() {
var pNode = document.getElementById('para');
var newPara = document.createElement('p');
newPara.style.color = 'red';
newPara.style.marginLeft = '50px';
var newText = document.createTextNode(
'А это динамически добавленный параграф!');
newPara.appendChild(newText);
pNode.parentNode.insertBefore(newPara, pNode.nextSibling);
}

Динамическое добавление реакций на события
dyna.html
Вместо определения значений атрибута onclick можно добавлять
элементам реакции на события. Например, вместо
window.onload = initBody;
можно написать
window.addEventListener('load', initBody, false);
Преимущества:
Соответствие стандарту (метод addEventListener применим не только
для HTML-страниц, но и для любых XML-документов).
Можно определить несколько реакций на одно и то же событие, при этом
все они будут выполняться последовательно.
Можно управлять распространением событий (третий аргумент
addEventListener).
Удалить реакцию можно с помощью метода
window.removeEventListener с теми же аргументами.
В примере реакции динамически добавляются и удаляются.

Использование групповой обработки
group.html
Массовую обработку элементов можно производить с помощью метода
getElementsByTagName, например:
var emElements = document.getElementsByTagName('em');
for (var i = 0; i < emElements.length; ++i) {
emElements[i].style.backgroundColor = 'yellow';
}
В примере показано изменение стиля элементов.

Элементы интерфейса с пользователем
Имеется большой набор элементов интерфейса с пользователем:
простое окно ввода;
многострочное окно ввода;
кнопка;
флажок;
переключатель;
Чаще всего эти элементы используются в составе «форм». Содержимое
«формы» может быть передано web-серверу в виде параметров запроса.
Все элементы считаются «элементами ввода» различных типов и
появляются в виде элементов
, но некоторые
могут иметь и свои собственные теги, например,
.

Кнопки
Пример использования кнопок.
Заголовок страницы
Жми сюда!
button.html
Внутри тела реакции this означает ссылку на сам элемент (кнопку).
Заголовок страницы
Жми сюда!
more-button.html
Осторожно! Внутри функции this означает ссылку на контекст!

Многострочный текст
<br> function changeProperty(butt, prop) {<br> if (typeof(butt.flag) == 'undefined') butt.flag =</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Многострочный текст function changeProperty(butt, prop) { if (typeof(butt.flag) == &#39;undefined&#39;) butt.flag =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/434641/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/434641/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/434641/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/434641/slide-13.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/434641/slide-13.jpg" class="slides-image"><!----><div class="slides-content">1;<br> var ta = document.getElementById('myText');<br> ta[prop] = butt.flag == 1;<br> butt.flag = 1 - butt.flag;<br> }<br>
Это область ввода текста
<br> Сюда вводим текст.
Disable/Enable
ReadOnly yes/no
textarea.html

Списки выбора
Выберите из списка:
Пики
Трефы
Бубны
Черви
Вы выбрали:
&bksp;
select.html
При выборе элемента происходит событие change, при этом можно узнать,
какое значение выбрано и какой текст связан с этим выбором.
selectNode.options – массив узлов, представляющих элементы списка
selectNode.size – число показываемых элементов
selectNode.multiple – разрешен ли мульти-выбор
selectNode.selectedIndex – индекс выбранного элемента
Еще атрибуты:
Черви

Списки выбора (продолжение)
Репка
Дедка
Бабка
Внучка
Жучка
Кошка
Мышка
Список может быть визуально разбит на группы
Бабка
Внучка
Жучка
Кошка
Мышка

Поля ввода
Элемент с тегом input может заменять и дополнять многие из
рассмотренных ранее элементов ввода. Его представление
и функциональность зависят от типа. Этот элемент никогда не имеет
внутреннего содержания, только атрибуты.
где «тип элемента ввода» может иметь следующие значения:
text
password
checkbox
radio
button
submit reset file hidden
текстовое поле ввода, похожее на textarea
текстовое поле ввода со скрытым отображением символов
флажок
элемент выбора
кнопка (такая же, как в элементе button)
Кроме этих типов есть еще типы, предназначенные исключительно для
представления элементов ввода внутри форм для передачи информации
на web-сервер. Это типы:

Поля ввода (продолжение)
имеют атрибуты maxLength, size, disabled, readOnly, value. />
имеют атрибуты defaultChecked, disabled, checked, value.
имеет атрибуты disabled, value.
Чтобы приделать надписи к флажкам и элементам выбора, используют
элемент label:
текст
.
Чтобы собрать элементы выбора в одну группу, используют
атрибут name:
.
Как выглядят все эти элементы ввода можно посмотреть в примере
input.html

Визуальная группировка элементов UI
Это группа элементов ввода checked="true" name="radio-group"
id="radio-1"/>
Надпись 1
Надпись 2
Надпись 3
Элементы ввода можно визуально сгруппировать и добавить
надпись к группе:

Формы
Введите запрос:
Форма – это средство для группировки элементов ввода с целью
последующей отправки введенной информации на сервер.
Отправка информации производится с помощью запроса типа GET или
POST с параметрами.
Атрибут action задает URL сервера, на который отправляется запрос.
Атрибут method задает используемую команду – GET или POST.
В приведенном примере осуществляется запрос GET к поисковой машине
Google с параметром q и значением введенного запроса.
Нажатие кнопки submit (отправить запрос) эквивалентно в данном случае
выдаче запроса http://www.google.com/search?q=value,
где value – содержимое текстового поля ввода.
simple-form.html

Более сложный пример формы
Введите анкетные данные
Ваше имя:
Запрашиваемая должность:
Программист
Web-дизайнер
Крутой спец
Квалификация:
Новичок
Профи
Эксперт
Хочу получать от
Важный атрибут каждого поля ввода – name. Он задает имя аргумента
при запросе к серверу. Пример формы:
complex-form.html

Методы GET и POST
Метод GET отправляет все значения в строке запроса с помощью
кодирования типа http://myurl.com/page?name1=val1&name2=val2...
вся строка видна в окне браузера;
ее можно запомнить в «закладках»;
легко вернуться назад на эту же страницу;
число и размер параметров ограничены длиной URL.
Метод POST отправляет все значения в заголовке запроса с помощью
задания пар name=value
отправляемые значения не так легко доступны;
URL запроса бесполезно запоминать: параметров в нем нет;
при возврате назад на эту же страницу чаще всего возникает
ошибка POSTDATA;
практически нет ограничений на число и длину параметров.

Специальные кнопки Submit и Reset
Запрос отправляется с помощью специального элемента ввода, имеющего
вид кнопки:
Надпись на кнопке можно специфицировать с помощью атрибута value:
Если надпись не специфицирована, то используется системное значение,
зависящее от локализации системы ("Submit" для английского языка,
"Отправить запрос" для русского).
Кнопка Reset используется для восстановления начальных значений
элементов ввода в форме:
Имитировать действие этих кнопок можно и программным путем.
var form = ... // DOM-узел для формы
form.submit(); ... form.reset();

Использование CSS для элементов ввода
Поскольку один и тот же тег input используется для элементов самого
разного вида, то задавать стили элементов в виде
input {
color: blue;
font-style: italic;
font-size: large;
}
хотя и допустимо, но часто неудобно. Задавать стили можно отдельно
для каждого типа элемента, например:
input[type="text"] {
color: blue;
font-style: italic;
font-size: large;
}