Программное создание, удаление и модификация HTML-элементов

Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

DOM модель представляет HTML-документ в виде дерева, в узлах которого находятся HTML-элементы. Каждый узел дерева (кроме корневого) имеет единственный родительский узел ( parentNode ) и может иметь дочерние ( childNodes ) и "братские" ( siblings ) узлы, т.е. узлы, имеющие общего родителя. Модификация документа DOM-методами заключается в создании нового элемента и размещения его в определенном узле, удалении или изменении узла.

Следующий пример показывает создание списка опций в форме в ответ на выбор пользователя с использованием DOM-методов createElement (создать HTML-элемент), appendChild (добавить элемент к родительскому элементу в качестве дочернего) и removeChild (удалить дочерний элемент).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Песенка-загадка</title></head><body> <form method="get" action="form1.htm"> Из чего же сделаны наши <input type="radio" name="Gender" value="m" onclick="CreateList('m')" />мальчишки <input type="radio" name="Gender" value="f" onclick="CreateList('f')" />девчонки <div id="divList">  </div> <input type="submit" value="Отправить" /> <input type="reset" value="Сброс" /> </form> <script type="text/javascript"> function CreateList(listType) { var maleOptions = ["веснушки", "хлопушки", "линейки", "батарейки"]; var femaleOptions = ["цветочки", "звоночки", "тетрадки", "переглядки"]; //ищем элемент(ы) по имени var oSelect = document.getElementsByName('Interest'); if (oSelect && oSelect[0]) //если элемент найден, удаляем его из родительского узла oSelect[0].parentNode.removeChild(oSelect[0]); // создаем элемент select (список опций) oSelect = document.createElement('select'); oSelect.name = 'Interest'; oSelect.multiple = true; //разрешаем множественный выбор var opArray = null; // выбираем массив опций в зависимости от выбора пользователя if (listType == 'm') opArray = maleOptions; else opArray = femaleOptions; for (var i = 0, n = opArray.length; i < n; i++) { //создаем элемент var op = document.createElement('option') op.innerHTML = opArray[i]; //добавляем в новый элемент в конец списка oSelect.appendChild(op); } //список еще не виден. добавляем его в родительский узел document.getElementById('divList').appendChild(oSelect); } </script> </body></html>

В этом же примере использовано свойство innerHTML, не являющееся частью DOM-модели, но поддерживаемое большинством браузеров. Это свойство содержит весь HTML-код (включая текст и разметку) между открывающим и закрывающим тэгами элемента (но не сами тэги). Использование innerHTML существенно упрощает процесс программирования и поэтому весьма популярно.

Вопросы

Для чего используется динамический HTML? Какие технологии он сочетает?
Что такое Объектная Модель Документа и какую роль играет она в динамическом HTML?
Кратко охарактеризуйте объекты window, history, navigator, document, location, screen.
Перечислите и охарактеризуйте наиболее часто употребляемые методы объекта window.
Что такое cookie? Как создавать и читать cookies?
С помощью какого метода можно найти в документе элемент по его id?
С помощью какого метода можно найти в документе все элементы определённого типа?
Какие методы DOM используются для создания и удаления элементов?
Что даёт свойство innerHTML?

См. лабораторную работу №5

Лекция 16:

События. Объект event

Ключевые слова: обработка событий, место, DOM, API, функция, список, объект, Internet, динамические страницы, целый, gallery

Обработка событий занимает центральное место в разработке динамических веб-страниц. С точки зрения DOM API, событие – это сообщение, отправляемое в ответ на некоторое действие, например, завершение загрузки документа, перемещение или щелчок мыши, нажатие клавиши. Событие может быть принято (перехвачено) и обработано программными средствами. Обработчик события – это, как правило, функция, написанная на языке сценариев (например, JavaScript), которая выполняет действия, когда произошло соответствующее событие.

Вот список основных событий:

События окна и документа: onload – документ загружен и противоположное событие onunload – документ выгружен из окна. Применяется к элементам body и frameset и объекту window.
События мыши: onclick – (одиночный) щелчок мыши и ondblclick – двойной щелчок. Одиночный щелчок может быть разложен на два события, onmousedown – кнопка мыши нажата и onmouseup – кнопка мыши отпущена. Отслеживаются также перемещения мыши: onmouseover – указатель мыши пересек границу объекта внутрь, onmouseout - указатель мыши пересек границу объекта наружу и onmousemove – мышь перемещается над объектом. Применяется к большинству элементов.
События клавиатуры: onkeypressed – нажата и отпущена клавиша, производящая символ. Это событие разделяется на два, onkeydown – клавиша нажата и onkeyup –клавиша отпущена. Применяется к большинству элементов.
События HTML-формы onsubmit и onreset и элементов формы onfocus, onblur и onchange рассмотрены в лекции ""HTML формы"" .

Объект window.event создается браузером автоматически в момент возникновения события и доступен только внутри функции-обработчике события. Следует подчеркнуть, что модель объекта event в Internet Explorer существенно отличается от используемой в других браузерах, и требуется большое внимание при разработке динамических страниц, предназначенных для разных браузеров. Тем не менее, целый ряд свойств оказывается одинаковым во всех современных браузерах.

type – тип события без приставки "on". Например, событие onclick имеет тип click.
button – нажатая кнопка мыши (0 – ни одна, 1 – левая, 2 – правая, 3 – левая и правая, 4 – средняя, 5 – левая и средняя, 6 – правая и средняя, 7 – все три). Это свойство имеет смысл для событий мыши. В случае остальных событий имеет значение 0 независимо от действительного состояния кнопок.
clientX, clientY – координаты указателя мыши относительно верхнего левого угла клиентской области окна браузера.
screenX, screenY - координаты указателя мыши относительно верхнего левого угла дисплея.
keyCode – целочисленный код клавиши, которая вызвала событие клавиатуры. Коды клавиш различаются для различных аппаратных платформ (PC или Macintosh).
shiftKey, ctrlKey, altKey – истина ( true ), если во время события нажата также клавиша Shift, Ctrl или Alt, соответственно.
cancelBubble – запрещает ( true ) или разрешает ( false, по умолчанию) передачу события вверх по иерархии от элемента-источника к родительскому элементу. Каждое событие происходит на единственном элементе-источнике. Если элементу-источнику не сопоставлена функция-обработчик, событие передается вверх по дереву элементов, пока не встретит функцию-обработчик или не достигнет корневого элемента. Если функция-обработчик найдена, но не содержит cancelBubble=true, то передача вверх продолжается, если содержит, то прерывается.

На этом список общих свойств заканчивается. Большинство остальных свойств объекта event доступны в различных браузерах под разными именами.

Элемент-источник события в Internet Explorer доступен как свойство srcElement, в Mozilla Firefox и других как target.
События onmouseover и onmouseout в Internet Explorer показывают свойства-объекты откуда ( fromElement ) и куда ( toElement ). В Mozilla Firefox эти объекты являются свойством relatedTarget.

Список различий можно продолжить. Несмотря на различия в объектной модели между браузерами, писать веб-страницы, работающие в разных браузерах, можно и нужно. Рассмотрим это на примерах.

Дата: 2019-02-02, просмотров: 235.

⇐ Предыдущая 17 18 19 20 212223 24 25 26 Следующая ⇒