Навігація
Головна
 
Головна arrow Інформатика arrow Проектування і розробка web-додатків
< Попередня   ЗМІСТ   Наступна >

ОБ'ЄКТНА МОДЕЛЬ ДОКУМЕНТА DOM

Для роботи з елементами web-сторінки на стороні клієнта використовується об'єктна модель документа (Document Object Model, DOM). Вона дозволяє реалізувати обробку змісту web-сторінки за допомогою JavaScript.

Сенс DOM-моделі полягає в тому, що браузер після отримання HTML-документа створює в оперативній пам'яті для кожного HTML- елемента відповідний йому об'єкт, який володіє своїми властивостями, методами і подіями. За допомогою мови JavaScript можна отримати посилання на будь-який об'єкт і виконати з ним різні дії. Основним призначенням DOM-Модсли є можливість зміни HTML-сторінки (і її відображення на екрані) в сценаріях JavaScript.

Зв'язки між об'єктами різних рівнів, показані на рис. 1.9, означають, що об'єкт верхнього рівня містить посилання на об'єкт нижнього рівня. Так, наприклад, між об'єктами Window і Document є зв'язок. Це означає, що об'єкт Window має властивість з ім'ям document, що містить посилання на об'єкт типу Document.

Ієрархія об'єктів web-сторінки

Мал. 1.9. Ієрархія об'єктів web-сторінки

Основним об'єктом для роботи з DOM-моделлю є глобальна змінна document, яка посилається на об'єкт Document, що описує HTML-документ, який відображається у вікні браузера.

Для зберігання довільної кількості посилань на об'єкти, розташовані на web-сторінці, використовуються масиви. Тому властивості об'єкта Document, призначені для зв'язку з компонентами web-сторінки, виглядають наступним чином:

  • • links [] - масив посилань на гіпертекстові зв'язку, сформовані в HTML-документі за допомогою елементів <а>;
  • • images [] - масив посилань на зображення, включені до складу web-сторінки за допомогою елемента
  • • forms [] - масив посилань на форми, створені за допомогою елементів

У цих масивах посилання на об'єкти 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.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 = 'зміст';

Наприклад, виведення повідомлень в тезі <p> можна виконати наступним чином:

"Script type =" text / javascript "> function Msg1 () {

document.getElementByld ( 'myText'). innerHTML = 'Дякую!';

}

function Msg2 (X

document.getElementByld ( 'myText'). innerHTML =

'Спробуй отримати повідомлення 1 ще раз ...';

}

</ Script>

cinput type = "button" onclick = "Msg1 ()" value = "Показати повідомлення 1" />

<Input type-'button "onclick =" Msg2 () "value =" Показати повідомлення 2 "/>

<P id = "myText"> </ p>

Введений користувачем текст можна вивести на екран в тезі з id = "userMsg":

<Script type = "text / javascript"> function showMsg () {

var userlnput = document.getElementByld ( 'userlnput'). value; document.getElementByld ( 'userMsg'). innerHTML = userlnput;

}

</ Script>

<Input type = '' input "maxlength = '' 40" id-'userlnput "onkeyup =" showMsg () "value =" Введіть текст тут ... "/>

<P id = "userMsg"> </ p>

 
Якщо Ви помітили помилку в тексті позначте слово та натисніть Shift + Enter
< Попередня   ЗМІСТ   Наступна >
 
Дисципліни
Агропромисловість
Аудит та Бухоблік
Банківська справа
БЖД
Географія
Документознавство
Екологія
Економіка
Етика та Естетика
Журналістика
Інвестування
Інформатика
Історія
Культурологія
Література
Логіка
Логістика
Маркетинг
Медицина
Нерухомість
Менеджмент
Педагогіка
Політологія
Політекономія
Право
Природознавство
Психологія
Релігієзнавство
Риторика
Соціологія
Статистика
Техніка
Страхова справа
Товарознавство
Туризм
Філософія
Фінанси
Пошук