Js отримати значення атрибута. Маніпулювання атрибутами елементів в jQuery

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

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: один з атрибутом, без нього і умова нокауту, щоб додати одне з них відповідно до елементом. Я також знаю про це звичайному очікуванні, але яке з рішень більш ефективно?

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

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

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

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

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

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

Читаємо значення атрибута

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

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

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

Встановлюємо значення атрибутів

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

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

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

1. Можна додавати / змінювати атрибути для будь-якого елемента (або набору елементів).
2. Можна додавати / змінювати кілька атрибутів відразу для елемента (або елементів) за допомогою завдання карти імен атрибутів і значень.
3. можна динамічно додавати / змінювати одиничний атрибут для декількох елементів за допомогою поворотної функції.

Встановлюємо один атрибут

Щоб встановити або змінити атрибут елемента потрібно викликати метод 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:

Після виконання коду, перше зображення буде мати атрибут 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 an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

Syntax

Element.setAttribute ( name, value);

Parameters

name A DOMString specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when setAttribute () is called on an HTML element in an HTML document. value A DOMString containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string.

Boolean attributes are considered to be true if they "re present on the element at all, regardless of their actual value; as a rule, you should specify the empty string (" ") in value (some people use the attribute" s name; this works but is non-standard). See the below for a practical demonstration.

Since the specified value gets converted into a string, specifying null doesn "t necessarily do what you expect. Instead of removing the attribute or setting its value to be null, it instead sets the attribute" s value to the string "null". If you wish to remove an attribute, call removeAttribute ().

Return value

Exceptions

InvalidCharacterError The specified attribute name contains one or more characters which are not valid in attribute names.

Example

In the following example, setAttribute () is used to set attributes on a.

HTML

Hello World

JavaScript

var b = document.querySelector ( "button"); b.setAttribute ( "name", "helloButton"); b.setAttribute ( "disabled", "");

This demonstrates two things:

• The first call to setAttribute () above shows changing the name attribute "s value to" helloButton ". You can see this using your browser" s page inspector (Chrome, Edge, Firefox, Safari).
• To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, Its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string ( ""), we are setting disabled to true, which results in the button being disabled.

DOM methods dealing with element "s attributes:

Not namespace-aware, most commonly used methods	Namespace-aware variants (DOM Level 2)	DOM Level 1 methods for dealing with Attr nodes directly (seldom used)	DOM Level 2 namespace-aware methods for dealing with Attr nodes directly (seldom used)
setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM 2)	hasAttributeNS	-	-
removeAttribute (DOM 1)	removeAttributeNS	removeAttributeNode	-

Specification

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
setAttribute	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support 5 Notes Full support 5 Notes Notes In Internet Explorer 7 and earlier, setAttribute doesn "t set styles and removes events when you try to set them.	Opera Full support Yes	Safari Full support 6	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support Full support See implementation notes. See implementation notes.

Gecko notes

Using setAttribute () to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use Element.value instead of Element.setAttribute ().

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

Чим відрізняється атрибут від DOM-властивості?

Атрибути - це 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, що не створюється.

Інша відмінність пов'язано з тим, що значення певних 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 і ніяк по-іншому.

Робота з DOM-властивостями елемента

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

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

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

На базі нього розберемо як здійснюється отримання 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 = "(! LANG: Новий текст підказки"; // присвоим 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

Отримаємо значення атрибута 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 = "(! LANG: John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

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

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

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

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

Name.defaultValue; // Tom

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

Приклад з атрибутом href

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

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

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

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

Приклад з атрибутом selected

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

немає оцінок 1 2 3 4 5

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

немає оцінок 1 2 3 4 5

Ще один спосіб роботи з атрибутами (властивість attributes)

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

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

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

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

I LOVE JAVASCRIPT

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

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

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

I LOVE JAVASCRIPT

завдання

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

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

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

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

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

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

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

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

приклад:

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

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

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

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

об'ект.свойство об'ект.атрібут об'ект.метод ()

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

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

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

необхідно:

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

Виконаємо завдання по порядку:
✍ Рішення:

Так як це мова 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).

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

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

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

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

getAttribute (attr)

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

removeAttribute (attr)

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

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

✍ Рішення:

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

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

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

elem.getAttribute ( "value")

elem.getAttribute ( "value")

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

elem.attributes .value

elem.attributes.value

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


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

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

...

необхідно



✍ Рішення:

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

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

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

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

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

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

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

...

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

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

✍ Рішення:

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

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

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

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

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

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

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

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

важливо: Метод працює тільки з тими елементами, для яких в специфікації явно передбачений атрибут name: Це теги 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>

Тепер виведемо в модальне вікно значення елементів масиву з нащадками, тобто тегами 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);)

For (var a in childMas) (alert (childMas [a] .src);)

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

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

<body> <form name = "f"> <input type = "text" id = "t"> <input type = "button" id = "b" value = "(! LANG: button" > !} <select id = "s" name = "ss"> <option id = "o1"> 1</ Option> <option id = "o2"> 3</ Option> <option id = "o3"> 4</ Option> </ Select> </ Form>

1 3 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.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 ...

... // небажані і застарілі методи доступу до елементів: 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 = "(! LANG: Привіт!"; 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";

Завдання 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:

1 2 3 4 5 6 7 8 9 10 11 12

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

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

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

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

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

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

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