javascript DOM об'єкти документа і доступ до них, javascript події

1. Об'єкти javascript і об'єктна модель документа
2. Властивості і атрибути об'єкта document в javaScript
3. Методи для роботи з атрибутами в JavaScript
4. Властивості елемента body
5. Доступ до елементів документа в javaScript
6. Перевірка правильності внесення даних форми

На уроці буде розглянуто початок теми: об'єктна модель документа (javaScript DOM) - основа динамічного HTML, будуть вивчені методи доступу до об'єктів і розглянуті способи обробки подій javascript

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

• В цілому об'єкт - це складовою тип даних, який об'єднує безліч значень в загальний модуль і дозволяє зберігати і витягувати за запитом значення за їхніми іменами.

Раніше ми вже почали знайомство з поняттям об'єкта в javascript.

• У javascript є таке поняття як DOM - Document Object Model - об'єктна модель веб-сторінки (html-сторінки).
• Теги документа або, як ще кажуть, вузли документа - це і є його об'єкти.

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

У елемента script є атрибути:

• async (асинхронна завантаження) і
• defer (очікування повного завантаження сторінки).

приклад:

<Script async type = "text / javaScript"> / * Дозволяє завантажувати js-файли паралельно і виконувати відразу після завантаження, не чекаючи обробки решти сторінки * / </ script> <script defer type = "text / javaScript"> / * дозволяє браузеру почати завантаження js-файлів паралельно, не зупиняючи подальшу обробку сторінки. Їх виконання відбувається після повного розбору об'єктної модель документа * / </ script>

<Script async type = "text / javaScript"> / * Дозволяє завантажувати js-файли паралельно і виконувати відразу після завантаження, не чекаючи обробки решти сторінки * / </ script> <script defer type = "text / javaScript"> / * дозволяє браузеру почати завантаження js-файлів паралельно, не зупиняючи подальшу обробку сторінки. Їх виконання відбувається після повного розбору об'єктної модель документа * / </ script>

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

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

Важливо:

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

тобто спочатку пишеться сам об'єкт, потім через точку і без пробілів вказується його властивість, атрибут або метод

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

Приклад:

нехай в html-документі є тег <div id = "MyElem" class = "small"> Мій елемент </ div>

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

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

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

<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); // виводимо в діалогове вікно

   // отримуємо доступ до об'єкту по його 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')); // виводимо в діалогове вікно

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

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

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

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

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

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

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

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

Різні способи роботи з атрибутами

Приклад: Вивести значення атрибута value текстового блоку.

✍ Рішення:

• Нехай є текстовий блок:
<Input type = "text" value = "Ім'я" id = "MyElem">

<Input type = "text" value = "Ім'я" id = "MyElem">

• Отримаємо доступ до текстового блоку через атрибут id:
var elem = document. getElementById ( 'MyElem'); var x = 'value';

var elem = document.getElementById ( 'MyElem'); var x = 'value';

• Розглянемо кілька способів отримання значення атрибута (для виведення використовуйте метод alert ()):

1.

elem. getAttribute ( 'value')

elem.getAttribute ( 'value')

2. точкова нотація:

3. Дужковий нотація:

4.

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

• Виведіть у модальне вікно значення атрибута value.
• Змініть значення атрибута type на значення «button». Подивіться на результат роботи скрипта.

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

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

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

також можна кількома способами: var x = 'key'; // key - назва атрибута, val - значення для атрибута // 1. elem. setAttribute ( 'key', 'val') // 2. elem. attributes .key = 'val' // 3. elem. attributes [ 'key'] = 'val' // 4. elem. setAttribute (x, 'val')

var x = 'key'; // key - назва атрибута, val - значення для атрибута // 1. elem.setAttribute ( 'key', 'val') // 2. elem.attributes.key = 'val' // 3. elem.attributes [ ' key '] =' val '// 4. elem.setAttribute (x,' val ')

Властивості елемента 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 = "кількість тортів" /> ...

<Input id = "cake" type = "text" value = "кількість тортів" /> ...

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



✍ Рішення:

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

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

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

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

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

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

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

Приклад:

На сторінці є текстове поле (тег input), з атрибутом value: <input type = "text" value = "кількість тортів" /> ...

<Input type = "text" value = "кількість тортів" /> ...

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

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

✍ Рішення:

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

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

припустимо в документі є елемент: <input type = "text" name = "MyElem" value = "1">

<Input type = "text" name = "MyElem" value = "1">

Необхідно: вивести значення value даного елемента

✍ Рішення:

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

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

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

це теги form, input, a, select, textarea і ряд інших, більш рідкісних.

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

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

document. getElementById (roditel). 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>

<! - контейнер для зображень -> <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); }

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); }

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

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

<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>

<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. Fb type); // button alert (document. Fs name); // ss alert (document. Fs 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 ...

... // небажані і застарілі методи доступу до елементів: 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.fbtype); // button alert (document.fsname); // ss alert (document.fsoptions [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"> ...

<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";

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

Варіант 2:

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

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

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

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

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

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

<Input type = "text" id = "name" value = "">

<Input type = "text" id = "name" value = "">

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

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

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

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

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

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

хвилин: <input type = "text" id = "monutes" value = "">

хвилин: <input type = "text" id = "monutes" value = "">

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

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

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

І останнє, якщо все таки користувач ввів в текстове поле, призначене для числа, і число і текст одночасно, то за допомогою раніше вивченої функції javascript parseInt можна виокремити з тексту число:
alert (parseInt (document. getElementById ( "cake") .value)); // 10

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

Завдання Js8_3.

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

Фрагмент коду: 1 2 3 4 5 6 7 8 9 10 11 12 <form> Ім'я: <input type = "text" id = "name"> <br> Кількість пончиків: <input type = "text" id = "donuts"> <br> Хвилин: <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>

<Form> Ім'я: <input type = "text" id = "name"> <br> Кількість пончиків: <input type = "text" id = "donuts"> <br> Хвилин: <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>

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

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

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