Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Топ:
Устройство и оснащение процедурного кабинета: Решающая роль в обеспечении правильного лечения пациентов отводится процедурной медсестре...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...
Интересное:
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Дисциплины:
 2017-12-12 |
 163 |
из
5.00
|
Заказать работу |
|
|
|
|
· Для работы с элементами web-страницы на клиентской стороне используется объектная модель документа (DocumentObjectModel, DOM). DOM-модель – это внутреннее представление HTML-страницы в виде дерева.
· Все элементы страницы, включая теги, текст, комментарии, являются взаимосвязанными узлами DOM (узлы DOM-дерева являются объектами). Из корня дерева по ссылкам можно добраться абсолютно до любого узла(корневым элементом документа является тег <html>). 
В HTML-странице помимо тегов используются комментарии и простой текст (перенос строки - это тоже текст). В DOM-модели они тоже представляют отдельные узлы. Поэтому общий вид дерева будет такой(см. рис).
Узлы-элементы - это теги, из которых состоит документ.
Текстовые узлы - весь текст внутри тега, включая пробелы и переносы строки.Перед <head> и после </body> текстовые узлы не создаются.
Комментарии - комментарии в коде страницы.
· У элементов DOM есть свойства и методы, которые позволяют изменять их.
· Основным назначением DOM-модели является возможность изменения HTML-страницы (и ее отображения на экране) в сценариях JavaScript.
Связи между объектами различных уровней, показанные на рис. ниже означают, что объект верхнего уровня содержит ссылку на объект нижнего уровня. Так, например, между объектами Window и Document есть связь. Это означает, что объект Window имеет свойство с именем document, содержащее ссылку на объект типа Document.
Рис. Иерархия объектов web-страницы
Основным объектом для работы с DOM-моделью является глобальная переменная document, которая ссылается на объект Document, описывающий HTML-документ, отображаемый в окне браузера.
МетодыобъектаDocument:
· open() - открывает новый документ; при этом для текущего документа все его содержимое удаляется.
|
|
Для хранения произвольного количества ссылок на объекты, расположенные на web-странице, используются массивы. Поэтому свойства объекта Document, предназначенные для связи с компонентами web-страницы, выглядят следующим образом:
• links[ ] – массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью элементов <а>;
• images[ ] – массив ссылок на изображения, включенные в состав web-страницы с помощью элемента <img>;
• forms[ ] – массив ссылок на формы, созданные посредством элементов <form>.
В этих массивах ссылки на объекты Link, Image и Form содержатся в том же порядке, в котором они встречаются в исходном тексте HTML- документа. Так, images[0] ссылается на первое изображение в составе web- страницы, images[1] – на второе изображение и т. д.
Объект Form ссылается на интерактивные элементы, принадлежащие HTML-форме документа. Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text, Password, Radio, Checkbox и т. д.), для их описания существует также обобщенный тип Element. Соответственно, ссылки на интерактивные элементы, принадлежащие форме, содержатсяв свойстве elements объекта Form.
Например, чтобы получить строку текста (value), которую пользователь ввел в первой форме (forms[0]) с помощью 3-го элемента управления (elements[2]), можно использовать следующее выражение:
line = document.forms[0].elements[2].value;
В результате выполнения данной команды значение третьего элемента управления, принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в переменную line.
Для получения ссылки на требуемый объект DOM чаще всего используются методы быстрого поиска элементов HTML:
• document.getElementByld(id) – для поиска элементов по значению атрибута id в элементах документа;
|
|
• document.getElementsByTagName(tag) – возвращает коллекцию всех элементов с определенным тэгом, и среди них можно искать нужный; например, можно получить второй элемент с тэгом <р>: document. getElementsByTagName('p')[1];
• document.getElementsByName(name) – возвращает все элементы, у которых имена (атрибут name) равны заданному значению; работает только с элементами, у которых имеется атрибут name, например, form, input, a, select, textarea и ряд других, более редких; данный метод не будет работать с остальными элементами типа div, р и т. п.;
• getElementsByClassName() – для поиска элементов по классу, но он работает не во всех браузерах, поэтому его редко используют.
После определения ссылки на требуемый объект (элемент документа), можно выполнять изменение его свойств и атрибутов. Например, следующий код изменит цвет текста наголубой (blue) в div- контейнере с идентификатором dataKeeper:
document.getElementByld('dataKeeper'). style.color = ' blue ';
Для изменения содержания элементов HTML-документа без перерисовки всей страницы нужно использовать свойство innerHTML. Обычно данное свойство используется вместе с функцией getElementByld() для получения ссылки на требуемый элемент документа:
document.getElementByld('ID эпемента') .innerHTML = 'содержание';
Например, вывод сообщений в тэге <р> можно выполнить следующим образом:
<script>
function Msg1() {
document.getElementByld('myText'). innerHTML = 'Спасибо! ';
}
function Msg2() {
document.getElementByld('myText') .innerHTML = 'Попробуй получить сообщение 1 еще раз...';
}
</script>
<input type="button1" onclick="Msg1()” value=”Показать сообщение 1" />
<input type-'button2" onclick="Msg2()" value="Показать сообщение 2" />
<p id=" myText " ></p>
Введенный пользователем текст можно вывести на экран в тэге с id=”userMsg":
<scripttype="text/javascript”>functionshowMsg(){
varuserlnput = document.getElementByld('userlnput').value; document.getElementByld('userMsg').innerHTML = userlnput;
}
</script>
<inputtype=''input" maxlength=''40" id-'userlnput” onkeyup=”showMsg()" value="Введите текст здесь..." />
<p id="userMsg"></p>
|
|
|
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!