Создаём страничку, ч.9 :
В приведённом ниже примере мы будем работать с объектной моделью документа (DOM) и IE 8.0 - не ниже. Объясняя браузеру - где расположен объект воздействия - мы будем создавать команду - запрос. Строить её мы будем по принципу иерархического подчинения (см. рис.8).
Отвлечёмся на время от "браузера и Ко." и поговорим о том, что мы собираемся сделать : переместить данные формы сразу на страничку, в контейнер. То, что мы помещаем в текстовые поля формы (<textarea> - а работать мы будем , для удобства, именно с этим тэгом) - носит название текстовый узел(textNode) или текстовый элемент(textElement). Текстовые узлы входят составными (дочерними - ChildNode) частями в вышеупомянутые тэги - родительские узлы (parentNode) которые, в свою очередь, являются дочерними для узла (элемента) form (подымаемся вверх по иерархии). Т.о. form является массивом - массивов. Это единственный в своём роде элемент, находящийся в зоне влияния объекта document.
К слову сказать - элементом считается всё находящееся в угловых скобках < >.
Для выполнения поставленной перед нами задачи мы создадим функцию JavaScript. Именно в ней будут содержаться рекомендации для браузера. Функцию можно - было не создавать, а рекомендации записать в виде блока скриптов прямо в "теле" странички, перед "формой" но, исполнять срипты нужно в строго определённый момент - после заполнения полей "формы", а это можно сделать только при помощи функции - обработчика событий, поэтому - только - функция. Добавляем в форму обработчик событий :
<input type="button" value="Добавить" onClick="getComment();">
Создадим команды - обращения к текстовым узлам :
для имени (с id="myname") : document.getElementById("myname").lastChild;
для отзыва (с id="mycomm") : document.getElementById("mycomm").lastChild;
Замыкающие выражения (в обоих случаях) говорят об уровне родства текстовых узлов.
Теперь о контейнерах в которые мы планируем переместить содержимое "формы". Их мы персонализируем при помощи атрибутов "id" : для имени - id="contN", для отзыва - id="contC". Обращение по "id" тэга более удобно, т.к. возвращает элемент а не массив элементов.
Создаём команды - обращения к контейнерам :
для имени : document.getElementById("contN");
и для отзыва: document.getElementById("contC");
А теперь мы объясним браузеру, что необходимо сделать с отмеченными элементами : необходимо взять текстовый узел (текст) элемента <textarea id="myname"> и поместить его в контейнер с id="contN", а текстовый узел (текст) элемента <textarea id="mycomm"> поместить в контейнер с id="contC". Выглядят эти команды так :
nameC.appendChild(nameE); и
commC.appendChild(commE);.
Здесь :
nameE -- имя переменной, присвоенное текстовому узлу с id="myname"
commE -- имя переменной, присвоенное текстовому узлу с id="mycomm"
nameC -- имя переменной, присвоенное контейнеру с id="contN"
commC -- имя переменной, присвоенное контейнеру с id="contC"
Важно понять - мы добавляем узел к узлу, т.е. равное к равному.
В сборе наша функция будет выглядеть так :
01 <script language="javascript">
02 function getComment()
03 {
04 var nameC = document.getElementById("contN");
05 var commC = document.getElementById("contC");
06 var nameE = document.getElementById("myname").lastChild;
07 var commE = document.getElementById("mycomm").lastChild;
08 nameC.appendChild(nameE);
09 commC.appendChild(commE);
10 }
11 <script>
рис.9
Так - уж повелось, что распознавание и работа с узлами и элементами, в JS происходит через переменные var.
дальше...
...назад