Додати атрибут у тег за допомогою javascript. Маніпулювання атрибутами елементів у jQuery. Методи роботи з атрибутами в JavaScript

У цій статті познайомимося DOM-властивості та атрибути, розглянемо, чим вони відрізняються і як правильно з ними працювати. Розберемо які у JavaScript є методи для виконання операцій над атрибутами.

Атрибути - це HTML-сутності, з допомогою яких ми можемо додати певні дані до елементів HTML-коді.

Коли браузер запитує певну сторінку, він отримує вихідний HTML-код. Після цього він парсить цей код і будує на його основі DOM. Під час цього процесу HTML-атрибути елементів перетворюються на відповідні DOM-властивості .

Наприклад, браузер, при читанні наступного HTML-рядка коду, створить для цього елемента наступні DOM-властивості: id, className, src та alt.

Звернення до цих властивостей JavaScript виконується як до властивостей об'єкта. Об'єктом тут є вузол (елемент) DOM.

Приклад, в якому отримаємо значення DOM-властивостей для наведеного вище елемента, і виведемо їх значення в консоль:

// Отримаємо елемент var brandImg = document.querySelector("#brand"); // виведемо в консоль значення DOM-властивостей елемента console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "логотип сайту"

Деякі назви DOM-властивостей не відповідають іменам атрибутів. Одним з таких є атрибут class. Цей атрибут відповідає DOM-властивість className . Ця відмінність пов'язана з тим, що class є ключовим словом JavaScript, воно зарезервоване і не може використовуватися. Через це розробники стандарту вирішили використовувати для відповідності якусь іншу назву, якою було вибрано className .

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

Якщо елемент має нестандартний HTML-атрибут, то властивість, що відповідає йому DOM, не створюється .

// Отримаємо елемент mydiv = document.querySelector("#mydiv"); // отримаємо значення властивість alt елемента і виведемо їх у консоль console.log(mydiv.alt); // undefined // отримаємо значення атрибут alt елемента та виведемо його в консоль console.log(mydiv.getAttribute("alt")); // "..."

Інша відмінність пов'язана з тим, що значення певних HTML-атрибутів та відповідних їм DOM-властивостей можуть бути різними. Тобто. атрибут може мати одне значення, а DOM-властивість, створене на його основі - інше.

Одним з таких атрибутів є checked.

Значення HTML-атрибута checked у цьому випадку – це порожня стрічка. Але, властивість, що відповідає даному атрибуту DOM, матиме значення true . Т.к. за правилами стандарту для встановлення true достатньо лише згадування цього атрибуту в HTML-коді і при цьому не важливо, яке він матиме значення.

При цьому навіть якщо ми в HTML-коді не вкажемо атрибут checked для елемента input з типом checkbox, то для нього в DOM все одно буде створено властивість checked, але воно буде false.

Крім цього, JavaScript дозволяє працювати з атрибутами. Для цього DOM API є спеціальні методи. Але їх бажано використовувати лише тоді, коли вам справді потрібно працювати з даними саме так.

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

Основні відмінності між DOM-властивістю та атрибутами:

• значення атрибута – це завжди рядок, а значення DOM-властивості – певний тип даних (не обов'язково рядок);
• ім'я атрибуту – реєстронезалежно, а DOM-властивості – реєстрозалежно. Тобто. HTML-код ми можемо, наприклад, HTML-атрибут id написати, як Id , ID і т.д. Те саме стосується й імені атрибуту, які ми вказуємо у спеціальних методи JavaScriptдо роботи з ним. Але до відповідної DOM-властивості ми можемо звернутися тільки за ID і ніяк по-іншому.

Робота з властивостями елементів JavaScript як вже було зазначено вище здійснюється як з властивостями об'єктів.

Але для того, щоб звернутися до якості деякого елемента, його необхідно спочатку отримати. Отримати DOM-елемент у JavaScript можна, наприклад, за допомогою універсального методу querySelector, а колекцію DOM елементівнаприклад, за допомогою querySelectorAll .

Як перший приклад розглянемо наступний HTML-елемент:

Текст інформаційного повідомлення... var alert = document.querySelector("#alert"); // Отримаємо елемент

На базі нього розберемо як здійснюється отримання DOM-властивостей, їх зміна та додавання нових.

Читання значень DOM-властивостей:

// Отримаємо значення DOM властивості id var alertId = alert.id; // "alert" // отримаємо значення DOM властивості className var alertClass = alert.className; // "alert alert-info" // отримаємо значення DOM властивості title var alertId = alert.title; // "Текст підказки..."

Зміна значень DOM-властивостей:

// для зміни значення DOM властивості, йому потрібно просто надати нове значення alert.title = "Новий текст підказки"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Додавання DOM-властивостей:

Alert.lang = "ru"; // встановимо властивості lang значення, що дорівнює "ru" alert.dir = "ltr"; // встановимо властивість dir значення рівне "ltr"

Приклад, у якому виведемо у консоль усі значення класів, які є у елементів p на сторінці:

Var paragraphs = document.querySelectorAll("p"); for (var i = 0, length = paragraphs.length ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Приклад, в якому встановимо всі елементи з класом content властивість lang зі значенням "ru":

Var contents = document.querySelectorAll(".content"); for (var i = 0, length = contents.length; i< length; i++) { contents[i].lang = "ru"; }

Атрибути спочатку задаються у HTML-коді. Вони хоч і пов'язані певним чином з властивостями, але це не одне й теж. Найчастіше слід працювати саме з властивостями, а до атрибутів звертатися тільки тоді, коли це дійсно потрібно.

Значення атрибутів, на відміну від DOM-властивостей, як це вже було зазначено вище, завжди є рядком.

JavaScript для виконання операцій, пов'язаних з атрибутами, є чотири методи:

• .hasAttribute("ім'я_атрибута") – перевіряє наявність вказаного атрибута у елемента. Якщо атрибут, що перевіряється, є у елемента, то даний методповертає true, інакше - false.
• .getAttribute("ім'я_атрибута") - отримує значення атрибута. Якщо вказаного атрибута немає елемента, то даний метод повертає порожній рядок ("") або null .
• .setAttribute("ім'я_атрибута", "значення_атрибута") – встановлює вказаний атрибут із зазначеним значенням елементу. Якщо вказаний атрибут є в елемента, цей метод тоді просто змінить йому значення.
• .removeAttribute("ім'я_атрибута") - видаляє зазначений атрибут у елемента.

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

Дуже цікавий прикладз атрибутом value.

Отримаємо значення атрибуту value та DOM-властивості value:

// Отримаємо значення атрибуту value у елемента name.getAttribute("value"); // "Bob" // отримаємо значення DOM-властивості value name.value; // "Bob" // оновимо значення атрибута value, встановимо йому нове значення name.setAttribute("value", "Tom"); // " Tom " // отримаємо значення DOM властивості value name.value; // "Tom"

З цього прикладу видно, що при зміні атрибуту value браузер автоматично змінює відповідно до нього DOM-властивість value .

Тепер давайте зробимо дії, навпаки, а саме змінимо значення DOM-властивості і перевіримо чи зміниться значення атрибуту:

// встановимо нове значення DOM-властивості value name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

З цього прикладу видно, що не завжди зміна DOM-властивості призводить до відповідної зміни атрибуту. Тобто. у цьому випадку зміна DOM-властивості value не змінює відповідний йому атрибут.

Те саме відбудеться, коли користувач вводитиме текст у це поле. У DOM-властивості value буде дійсне значення, а у відповідному йому атрибуті початкове або те, яке ми встановили, наприклад, за допомогою методу setAttribute .

Цей приклад показує, що коректніше працювати завжди з DOM-властивостями, а звертатися до атрибуту потрібно лише тоді, коли це дійсно необхідно.

Навіть якщо вам потрібно отримати початкове значення value , яке ми встановили в HTML, можна скористатися властивістю. Властивість, що містить початкове значення атрибута value називається defaultValue .

Name.defaultValue; // Tom

Ще один дуже цікавий приклад, але тепер із атрибутом href.

Приклад, у якому потрібно отримати значення посилання так, як воно було встановлено в HTML.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // повний URL, наприклад: http://localhost/page2.html

У цьому прикладі атрибут href і DOM-властивість href містять різні значення. В атрибуті href - те, що ми встановили в коді, а DOM-властивості - повний URL. Ця різниця продиктована стандартом, відповідно до якого браузер повинен привести значення href до повного URL.

Тому якщо нам потрібно отримати те, що знаходиться в атрибуті, то без методу getAttribute у цьому випадку не обійтися.

На завершення розберемо ще атрибут selected.

Приклад, в якому показано, як можна отримати значення вибраної опції select:

немає оцінки 1 2 3 4 5 // отримуємо елемент select var mark = document.querySelector("#mark"); // 1 спосіб mark.querySelector("option:checked").value; // 2 спосіб mark.value;

Приклад, в якому показано, як можна отримати вибрані значення опцій в елементі select:

немає оцінки 1 2 3 4 5 // отримуємо елемент select var mark = document.querySelector("#mark"); // 1 спосіб (через створення масиву та наповненням його значень обраних опцій) var arr =; for (var i = 0, length = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)

У JavaScript у кожного елемента є властивість attributes, за допомогою якого можна отримати всі його атрибути у вигляді об'єкта NamedNodeMap.

Цей спосібможе знаходити застосування, коли вам потрібно, наприклад, перебрати всі атрибути елемента.

Доступ до атрибуту цієї колекції здійснюється за його індексом або за допомогою методу item . Відлік атрибутів цієї колекції ведеться з 0.

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

I LOVE JAVASCRIPT

Крім цього, працювати з цією колекцією можна також за допомогою таких методів:

• .getNamedItem("ім'я_атрибута") - отримує значення зазначеного атрибута (якщо зазначений атрибут відсутній у елемента, то як результат отримаємо null).
• .setNamedItem("атриб_узол") – додає новий атрибут до елемента або оновлює значення у існуючого. Для створення атрибута необхідно використовувати метод document.createAttribute() , якому як параметр необхідно передати ім'я атрибута. Після цього створеному атрибуту необхідно надати значення за допомогою властивості value .
• .removeNamedItem("ім'я_атрибута") – видаляє зазначений атрибут у елемента (як результат повертає видалений атрибут).

Наприклад, роботи з атрибутами через методи getNamedItem, setNamedItem та removeNamedItem:

I LOVE JAVASCRIPT

• Вивести у консоль усі елементи документа, які мають атрибут id .
• Додати атрибут title до всіх зображень на сторінці, якщо цього атрибута у них немає. Значення атрибуту встановити рівним значенню атрибуту alt.

Цей урок присвячений читанню та зміні атрибутів елементів у jQuery.

Атрибути – це пара ім'я/значення, яка призначається елементам у тезі. Приклади атрибутів ( href, title, src, class):

• attr() для читання, додавання та зміни атрибутів
• removeAttr() для видалення атрибутів

У цьому уроці розбирається робота з методами attr() і removeAttr().

p align="justify"> Для роботи з класами CSS існують спеціальні методи jQuery, які описані в іншому уроці . Працюючи над проектом в jQuery доводиться дуже часто маніпулювати класами CSS, а атрибут class може містити кілька імен класів, що значно ускладнює роботу з ним, порівняно з іншими атрибутами.

Якщо ви збираєтеся працювати зі значеннями полів введення, то краще використовувати метод val() , який не тільки забезпечує спрощений варіант роботи з атрибутом value , але може читати і встановлювати значення у вибраних елементах списку select .

Читання значення атрибута елемента здійснюється просто. Потрібно тільки викликати метод attr() для об'єкту jQueryякий містить елемент, передавши йому ім'я атрибута для читання. Метод повертає значення атрибуту:

// Виводимо значення атрибуту "href" елемента #myLink alert ($("a#myLink").attr("href"));

Якщо об'єкт jQuery містить кілька елементів, метод attr() читає значення атрибуту тільки для першого елемента з набору.

Метод attr() можна також використовувати для додавання або зміни значень атрибутів:

• Якщо атрибут не існуєв елементі, він буде доданийі йому буде надано задане значення.
• Якщо атрибут вже існує, його значення буде оновленозаданим значенням.

Існує три способи використовувати метод attr() для додавання або зміни атрибутів:

Щоб встановити або змінити атрибут елемента, потрібно викликати метод attr() із зазначенням імені атрибута та значення. Наприклад:

// Змінюємо значення атрибуту "href" елемента #myLink на значення "http://www.example.com/" // (якщо атрибут "href" не існує, він буде створений автоматично) $("a#myLink"). attr("href", "http://www.example.com/");

Також можна встановити той самий атрибут для декількох елементів:

Ви можете встановити кілька атрибутів одночасно для одного або кількох елементів за допомогою картки. Це список пар ім'я/значення, яке виглядає так:

(ім'я1: значення1, ім'я2: значення2, ...)

У наступному прикладі встановлюються два атрибути для елемента img одночасно:

// Встановлюємо атрибути "src" та "alt" для елемента img #myPhoto $("img#myPhoto").attr(("src": "mypic.jpg", "alt": "My Photo"));

Також можна встановлювати атрибути для декількох елементів:

// Встановлюємо атрибути "src" та "alt" для всіх елементів img $("img").attr(("src": "mypic.jpg", "alt": "My Photo"));

Замість передавати значення атрибутів методу attr() , можна передати ім'я зворотної функції. Так можна динамічно встановлювати значення атрибуту для кількох елементів відповідно до позиції елемента, існуючим значенням атрибута або іншими властивостями.

Поворотна функція має приймати два аргументи:

• Індекс позиції поточного вибраного елемента набору (починається з нуля)
• старе значення атрибута для поточного вибраного елемента

Значення, що повертається функцією використовується для заміщення значення атрибута.

Крім поточного положення елемента та старого значення атрибуту, ваша функція може отримати доступ до самого елемента за допомогою ключового слова this . Таким чином, можна отримати доступ до будь-якої властивості або методу елемента з зворотної функції.

У прикладі використовується зворотна функція для додавання атрибуту alt кожному зображенню на сторінці на основі положення зображення та його атрибута src:

$(init); function init() ( // Встановлюємо атрибут "alt" для всіх елементів "img" $("img").attr("alt", setAltText); function setAltText(index, attributeValue) ( ​​return ("Малюнок" + (index +1) + ": " + this.src); ) )

Після виконання коду перше зображення матиме атрибут alt зі значенням "Малюнок 1: myphoto.jpg" , а друге зображення матиме атрибут alt зі значенням "Малюнок 2: yourphoto.jpg" .

Щоб видалити атрибут з елемента, потрібно викликати метод removeAttr() , передавши йому ім'я атрибута для видалення. Наприклад:

// Видаляємо атрибут "title" із елемента #myLink $("a#myLink").removeAttr("title");

Ви також можете викликати метод removeAttr() для об'єкта jQuery, який містить декілька елементів. Метод removeAttr() видалить заданий атрибут з усіх елементів:

// Видаляємо атрибут "title" із усіх посилань $("a").removeAttr("title");

У цьому уроці були розглянуті питання роботи з атрибутами елементів у jQuery:

• Читання значень атрибутів
• Встановлення одного атрибуту
• Встановлення кількох різних атрибутів одночасно
• Використання поворотної функції для динамічного встановлення значень атрибутів у наборі елементів
• Видалення атрибутів із елемента

Sets the value of attribute on the specified element. Якщо atribut already exists, value is updated; іншийwise a new attribute is added with the specified name and value.

Boolean attributes вважаються вірно, якщо вони "перетворюються на елемент в all, незрівнянно з ними ця величина ; ця робота не є нестандартною). Натисніть на практичну демонстрацію.

Без особливих цінностей наведено в string, specifying null doesn"t необхідно do what you expect. Якщо ви збираєтеся запустити attribute, call removeAttribute() .

У наступному прикладі, setAttribute() is used to set attributes on a .

Ці demonstrates two things:

• Перший дзвінок до наборуAttribute() над shows changing the name attribute"s value to "helloButton".
• Для того, щоб встановити значення Boolean attribute, так само як і disabled , може бути specify any value. У empty string або name of atribut є recommended values. Все, що matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true . Absence of attribute means its value is false . Під час встановлення параметра disabled attribute to empty string (""), we are setting disabled to true , які результати в button being disabled.

DOM методи розпису з елементом's attributes:

• DOM Level 2 Core: setAttribute (introduced в DOM Level 1 Core)

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data і пишуть.

Update compatibility data on GitHub

Використовуючи setAttribute() для modify certain attributes, most notably value в XUL, роботи inconsistently, as the atribute specifies the default value. Для того щоб використовувати або змінити поточні значення, ви повинні використовувати властивості. Для прикладу, використовуйте Element.value instead of Element.setAttribute() .

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

Ko.bindingHandlers.attrIf = ( update: function (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); )))))); link

Я хотів би просто відповісти на @gbs, але я не можу. Моє рішення полягало б у тому, щоб мати два однакові елементи HTML: один з атрибутом, без нього та умова нокауту, щоб додати одне з них відповідно до елемента. Я також знаю про це звичайне очікування, але яке з рішень ефективніше?

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

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

Раніше ми вже почали знайомство з поняттям у JavaScript.

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

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

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

Приклад:

/* Дозволяє завантажувати js-файли паралельно та виконувати відразу після завантаження, не чекаючи обробки решти сторінки */ /* Дозволяє браузеру розпочати завантаження js-файлів паралельно, не зупиняючи подальшу обробку сторінки. Їх виконання відбувається після повного аналізу об'єктної моделі документа */

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

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

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

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

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

Мій елемент

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

.small( color:red; font-size:small; ) .big( color:blue; font-size:big; )

Необхідно:

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

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

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

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

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

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

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

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

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

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

• Додавання атрибута (встановлення для нього нового значення):

getAttribute(attr)

• Перевірка наявності даного атрибуту:

removeAttribute(attr)

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

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

• Нехай є текстовий блок:

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

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

elem.getAttribute ("value" )

elem.getAttribute("value")

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

elem.attributes .value

elem.attributes.value

3. скобкова нотація:

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


Встановити значення атрибутів можна також кількома способами:

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

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

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

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

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

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

...

Необхідно

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

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

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

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

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

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

...

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

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

✍ Рішення:

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

var a =document.getElementsByTagName("input"); alert(a.value); // Повертає "кількість тортів"

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

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

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

var element = document.getElementsByName("MyElem"); alert(element.value);

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

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

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

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

document.getElementById(roditel).childNodes;

Розглянемо приклад, де теги зображень поміщені в контейнер — тег div . Таким чином, тег div є батьком даних зображень, а самі теги img відповідно є нащадками тега 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 (var a in childMas)( alert(childMas[a].src); )

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

1 3 4

Доступ:

... // небажані та застарілі методи доступу до елементів: alert(document.forms.name); // f alert(document.forms.elements.type); // text alert(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // кращі методи доступу до елементів alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

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

HTML-код:

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=="") ( якісь дії, наприклад, виведення повідомлення з вимогою заповнити поле );

Крім того, можна обійтися без скрипту. Тег input текстового поля має атрибут pattern . як його значення вказується регулярний вираздля перевірки даних у даному текстовому полі форми. Якщо є атрибут pattern, то форма не надсилатиметься, поки це текстове поле не буде заповнено правильно.
Наприклад, для перевірки, чи не залишилося поле порожнім:

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

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

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

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

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


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

Ім'я:
Кількість пончиків:
Хвилин:
Підсумок:
Податок:
Підсумок:
...

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

* Виконати завдання також за допомогою атрибута текстових полів pattern, використовуючи .

Фрагмент скрипту:

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

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