< > ↑ Вгору

Об'єкти javascript і об'єктна модель документа

Давайте розглянемо на схемі ієрархію об'єктів в JavaScript, і тe, на якому місці ієрархії знаходиться розглянутий в даній темі об'єкт document.

Властивості і атрибути об'єкта document в javaScript

Об'єкт document являє собою веб-сторінку.

Важливо: Для звернення до властивостей і методів об'єкта в javaScript, як і при роботі з іншими об'єктами, використовується точкова нотація:

т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

об'єкт. властивість
об'єкт. атрибут
об'єкт. метод ()

Розглянемо приклад:

Приклад: нехай в html-документі є тег

< div id = "MyElem" class = "small"> Мій елемент </ div >

і певний для нього стиль css (навіть два стилю, другий стане в нагоді для завдання):

<style type = "text/css" >
   .small{
      color: red;
      font-size: small;
   }
   .big{
      color: blue;
      font-size: big;
   }
</style >

Необхідно:

  1. задати нову властивість об'єкта, привласнити йому значення і вивести це значення;

  2. вивести значення атрибута об'єкта;

  3. змінити значення атрибута об'єкта.

Виконаємо завдання по порядку:

Рішення:

1.

Так як це мова javascript, то об'єкту можна придумати і задати будь-яку властивість з будь-яким значенням. Але для початку отримаємо доступ до об'єкта (про доступ до об'єкта буде детально розказано нижче в даному уроці):

// отримуємо доступ до об'єкту по його id
var element = document.getElementById('MyElem');
element.myProperty = 5; // призначаємо властивість
alert(element.myProperty); // виводимо в діалогове вікно

2.

Наступне завдання пов'язане з атрибутом об'єкта. Атрибут об'єкта - це атрибути тега. Тобто в нашому випадком їх два: атрибут class зі значенням small і атрибут id. Будемо працювати з атрибутом class.

Тепер додамо javascript-код для виведення значення атрибута нашого об'єкта. Код повинен знаходитися після основних тегів:

// отримуємо доступ до об'єкту по його id
var element = document.getElementById('MyElem');
alert(element.getAttribute('class')); // виводимо в діалогове вікно

3.

І останнє завдання: змінюємо значення атрибута. Для цього у нас заготовлено стиль «big». Замінимо значення атрибуту class на цей стиль:

// отримуємо доступ до об'єкту по його id
var element = document. getElementById('MyElem');
element.setAttribute('class','big');

В результаті наш елемент стане більшого розміру і забарвиться в синій колір (клас big).

Тепер докладніше розглянемо використані в прикладі методи для роботи з атрибутами.

Методи для роботи з атрибутами в JavaScript

Атрибути можна додавати, видаляти і змінювати. Для цього є спеціальні методи:

Задание:

В html-документі створіть елемент текстове поле з встановленим за замовчуванням текстом «Привіт!»:

Подивіться на результат в браузері.

  • Виведіть у модальне вікно значення атрибута value.

  • Измените значение атрибута type на значение «button». Посмотрите на результат работы скрипта.

Фрагмент кода:

<input type = "text" value = "Привет!" id = "t1">
<script>
var element = document.getElementById('t1');
alert(...);
element.setAttribute(...);
</script>

Властивості елемента body

Через об'єкт document можна звернутися до тіла документа - тегу body - з його деякими корисними властивостями.

Наприклад, у тега body є дві властивості: ширина і висота клієнтського вікна:

document.body.clientHeight - висота клієнтського вікна

document.body.clientWidth - ширина клієнтського вікна

Але найголовніше, як ми вже дізналися, це те, що через об'єкт document за допомогою спеціальних методів здійснюється доступ до всіх елементів сторінки, тобто тегами.

Важливо: При такого роду зверненні до тегам сторінки скрипт повинен знаходитися в кінці дерева елементів, перед закриттям body! Так як до моменту виконання скрипта все елементи вже повинні бути «намальовані» браузером на екрані

Завдання js8_1. Видавати повідомлення про розміри вікна браузера: наприклад, «розміри вікна браузера 600 х 400»

Доступ до елементів документа в javaScript

Для доступу до об'єктів або пошуку об'єктів передбачено кілька варіантів:

  1. Пошук по id (або метод getElementById), повертає конкретний елемент

  2. Пошук по назві тега (або метод getElementsByTagName), повертає масив елементів

  3. Пошук по атрибуту name (або метод getElementsByName), повертає масив елементів

  4. Через батьківські елементи (отримання всіх нащадків)

Розглянемо кожен з варіантів докладніше.

1. Доступ до елементу через його атрибут id

Синтаксис: document.getElementById(id)

Метод getElementById () повертає сам елемент, який можна потім використовувати для доступу до даних

Приклад: На сторінці є текстове поле з атрибутом id = "cake":

<input id = "cake" type = "text" value = "кол-во тортов" />
...

Необхідно: вивести значення його атрибуту value

Рішення:

alert(document.getElementById("cake").value); // повертає "к-ть тортів"

Можна виконати те ж саме, реалізувавши звернення до об'єкту через змінну:

var a = document.getElementById(.atributs-item{"cake"});
alert (a.value); // виведемо значення атрибута value, тобто текст "кількість тортів"

Важливо: Скрипт повинен знаходитися обов'язково після тега!

2. Доступ до масиву елементів через назву тега name і за допомогою індексу масиву

Синтаксис: document.getElementsByTagName(name);

Приклад: На сторінці є текстове поле (тег input), з атрибутом value:

<input type = "text" value = "кол-во тортов" />
...

Необхідно: вивести значення його атрибуту value

Метод getElementsByTagName через змінну організовує доступ до всіх елементів input (тобто до масиву елементів input), навіть якщо цей елемент - єдиний на сторінці. Щоб звернутися до конкретного елементу, наприклад до першого, то вказуємо його індекс (масив починається з нульового індексу).

Рішення:

Звертаємося до конкретного елементу за індексом:

var a = document.getElementsByTagName("input");
alert(a[0].value); // повертає "к-ть тортів"

3. Доступ до масиву елементів за значенням атрибута name

Синтаксис: document.getElementsByName(name);

Метод getElementsByName ("...") повертає масив об'єктів, у яких атрибут name дорівнює зазначеному в якості параметра методу значенням. Якщо такий елемент тільки один на сторінці, то метод все одно повертає масив (тільки з одним єдиним елементом).

Приклад: припустимо в документі є елемент:

<input type = "text" name = "MyElem" value = "1" />

Необхідно: вивести значення його атрибуту value

Рішення:

var element = document.getElementsByName('MyElem');
alert(element[0].value);

В даному прикладі елемент один, але звернення здійснюється до нульового елементу масиву.

Важливо: Метод працює тільки з тими елементами, для яких в специфікації явно передбачений атрибут name: це теги form, input, a, select, textarea і ряд інших, більш рідкісних.

Метод document.getElementsByName не працюватиме з іншими елементами типу div, p і т.п.

4. Доступ до нащадків батьківського елемента

Доступ до нащадків в javascript відбувається за допомогою властивості childNodes. Властивість належить об'єкту-батькові.

document.getElementById(roditel).childNodes;

Розглянемо приклад, в якому теги зображень поміщені в контейнер - тег div. Таким чином, тег div є батьком даних зображень, а самі теги img, відповідно, є нащадками тега div:

<!-- контейнер для зображень -->
<div id = "div_for_img">
        <!-- масив об'єктів-зображень -->
        <img src = "pic1.jpg" />
        <img src = "pic2.jpg" />
        <img src = "pic3.jpg" />
        <img src = "pic4.jpg" />
</div>

Тепер виведемо в модальне вікно значення елементів масиву з нащадками, тобто тегами img:

var myDiv = document.getElementById("div_for_img"); // звертаємося до батьків-контейнеру
var childMas = myDiv.childNodes; // масив нащадків
for (var i = 0; i < childMas.length; i++ ){
     alert(childMas[i].src);
}

Зверніть увагу, що для перебору елементів масиву нащадків зручно використовувати цикл For in. Тобто в нашому прикладі отримуємо цикл:

...
for (var a in childMas){
     alert(childMas[a].src);
}

5. Інші способи звернення до елементів

Інші способи розглянемо на прикладі:

<body>
<form name = "f">
<input type = "text" id = "t">
<input type = "button" id = "b" value = "button">
<select id = "s" name = "ss">
<option id = "o1"> 1 </option>
<option id = "o2"> 3 </option>
<option id = "o3"> 4 </option>
</select>
</form>

Доступ:

...
// небажані і застарілі методи доступу до елементів:
    alert(document.forms[0].name); // f
    alert(document.forms[0].elements[0].type); // text
    alert(document.forms[0].elements[2].options[1].id); // o2
    alert(document.f.b.type); // button
    alert(document.f.s.name); // ss
    alert(document.f.s.options[1].id); // o2

// кращі методи доступу до елементів
    alert(document.getElementById("t").type); // text
    alert(document.getElementById("s").name); // ss
    alert(document.getElementById("s").options[1].id); // 02
    alert(document.getElementById("o3").text); // 4
...

Приклад: В html-документі створити кнопку і текстове поле. За допомогою скрипта розфарбовувати фон кнопки (властивість style.backgroundColor кнопки) і виводити напис «Привіт!» В текстовому полі (трибут value).

Html-код:

<body>
<input type = "text" value = "" id = "t1"><br>
<input type = "button" value = "я - кнопка" id = "b1">
...

Пояснення: скрипт необхідно вставити після тегів текстового поля і кнопки

Рішення:

Варіант 1:

document.getElementById("t1"). value = "Привіт!";
document.getElementById("b1").style.backgroundColor = "red";

Варіант 2:

document.getElementById("t1"). setAttribute ('value', 'Привіт!');
document.getElementById("b1"). style.backgroundColor = "red";

Завдання Js8_2. Створіть теги текстових полів. Задайте їм відповідні значення атрибутів id. За допомогою скрипта додайте в усі числові поля (які передбачають чисельні значення) значення «0»

Перевірка правильності внесення даних форми

Чи не залишилось поле порожнім?

Вводиться користувачами даними довіряти не можна. Припускати, що користувачі при введенні даних будуть їх перевіряти, нерозумно. Значить необхідно для цього використовувати javascript.

Для того, щоб перевірити, чи не залишилося текстове поле порожнім (наприклад, після заповнення користувачем даних будь-якої анкети), слід звернутися до властивості value. Якщо значенням властивості є порожній рядок (""), значить необхідно якось оповістити про це користувача.

Тобто, перевірка того, чи залишилося поле порожнім буде виглядати так:

if (document. getElementById ("name"). value == "")
{
    якісь дії, наприклад, виведення повідомлення з вимогою заповнити поле
};

Текст замість числового значення: функція isNaN

Якщо поле передбачає введення числового значення, а замість цього користувач вводить текст, то необхідно використовувати функцію isNaN (з англ. «Чи є не числом?»), яка перевіряє тип даних, що вводяться і повертає true у разі введення текстових даних замість числових.

Таким чином якщо повернуто true, то необхідно сповістити користувача про те, щоб він ввів правильний формат, тобто число.

Перевірка буде виглядати наступним чином:

if (isNaN (document.getElementById ("minutes"). value)) {
    оповіщення з вимогою ввести числові дані
};

І останнє, якщо все таки користувач ввів в текстове поле, призначене для числа, і число і текст одночасно, то за допомогою раніше вивченої функції javascript parseInt можна виокремити з тексту число:

alert(parseInt(document.getElementById("cake").value)); // 10

Завдання Js8_3. Дана сторінка з елементами для заповнення:

Фрагмент коду:

<form>
Iм'я: <input type = "text" id = "name"><br>
Кількість пончиків: <input type = "text" id = "donuts"><br>
Xвилин: <input type = "text" id = "minutes"><br>
Проміжні підсумки: <input type = "text" id = "poditog"><br>
Податок: <input type = "text" id = "tax"><br>
Підсумок: <input type = "text" id = "itog"><br>
<input type = "submit" value = "замовити" onclick = "placeOrder();">
</form>
<script type = "text/javascript">
...
</script>

Hеобхідно:

Доповніть порожні місця фрагмента коду, розташованого нижче, котрий перевіряє правильність заповнення двох текстових полів: ім'я (id = "name") і хвилин (id = "minutes"). Використовуйте перевірку на залишення поля порожнім ("") та правильного формату заповнення числового поля (isNaN):

У коді використовуються логічні оператори javascript для побудови складних умов, пройдені раніше.

Новим поняттям для вас є виклик функції в якості обробника події кнопки: onclick = "placeOrder ();"

Після клацання на кнопці буде викликатися функція placeOrder ()