Този урок е за четене и промяна на атрибути на елементи в jQuery.

Атрибутите са двойка име/стойност, която се присвоява на елементи в таг. Примери за атрибути ( href, заглавие, src, клас):

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

Този урок се занимава с методите attr() и removeAttr().

За да работите с CSS класове, има специални jQuery методи, които са описани в друг урок . Когато работите върху проект в jQuery, често трябва да манипулирате CSS класове и клас атрибутможе да съдържа няколко имена на класове, което го прави много по-труден за работа в сравнение с други атрибути.

Ако ще работите със стойности на полето за въвеждане, по-добре е да използвате метода val(), който не само предоставя опростена версия на атрибута value, но може също да чете и задава стойностите в избраните елементи на изберете списък.

Четене на стойността на атрибут

Четенето на стойността на атрибут на елемент е лесно. Всичко, което трябва да направите, е да извикате метода attr() на обекта jQuery, който съдържа елемента, като му предадете името на атрибута за четене. Методът връща стойността на атрибута:

// Показване на стойността на атрибута "href" на предупреждението за елемент #myLink ($("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": "Моята снимка")) ;

Можете също да зададете атрибути на множество елементи:

// Задаване на атрибути "src" и "alt" за всички img елементи $("img").attr(( "src": "mypic.jpg", "alt": "Моята снимка" ));

Задаване на атрибути чрез функция за обратно извикване

Вместо да предавате стойности на атрибути към метода attr(), можете да подадете името на функцията за обратно извикване. По този начин можете динамично да задавате стойности на атрибути за множество елементи според позицията на елемента, съществуваща стойност на атрибут или други свойства.

Функцията return трябва да приема два аргумента:

• Индекс на позицията на текущо избрания елемент в набора (на база нула)
• старата стойност на атрибута за текущо избрания елемент

Върнатата стойност на функцията се използва за заместване на стойността на атрибута.

В допълнение към текущата позиция на елемента и старата стойност на атрибута, вашата функция може да получи достъп до самия елемент чрез ключовата дума this. По този начин можете да получите достъп до всяко свойство или метод на елемент от функция за обратно извикване.

Примерът използва обратно извикване, за да добави alt атрибут към всяко изображение на страницата въз основа на позицията на изображението и неговия src атрибут:

След изпълнение на кода, първото изображение ще има alt атрибут със стойността "Picture 1: myphoto.jpg" , а второто изображение ще има alt атрибут със стойността "Picture 2: yourphoto.jpg" .

Изтриване на атрибут

За да премахнете атрибут от елемент, извикайте метода removeAttr(), като му предадете името на атрибута за премахване. Например:

// Премахване на атрибута "title" от елемента #myLink $("a#myLink").removeAttr("title");

Можете също да извикате метода removeAttr() на jQuery обект, който съдържа множество елементи. Методът removeAttr() ще премахне дадения атрибут от всички елементи:

// Премахване на атрибута "title" от всички връзки $("a").removeAttr("title");

Резюме

В този урок разгледахме проблемите с работата с атрибути на елементи в jQuery:

• Четене на стойности на атрибути
• Задаване на един атрибут
• Задаване на множество различни атрибути едновременно
• Използване на функция за обратно извикване за динамично задаване на стойности на атрибути в набор от елементи
• Премахване на атрибути от елемент

Урокът ще покрие началото на темата: обектният модел на документа (javaScript DOM) е в основата на динамичния HTML, ще бъдат изучавани методите за достъп до обекти и ще бъдат разгледани начините за обработка на javascript събития

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

По-рано вече започнахме да се запознаваме с концепцията в javascript.

• В javascript има такова нещо като DOM - Обектен модел на документ- обектен модел на уеб страница (html страница).
• Документните етикети или, както се казва, документните възли са негови обекти.

Да погледнем диаграмата обектна йерархия в JavaScriptи къде в йерархията се намира въпросният документен обект.

Скрипт елементът има атрибути:

отложи (изчакайте страницата да се зареди напълно).

Пример:

Свойства и атрибути на обекта документ в javaScript

Обектът документ представлява уеб страница.

Важно:За достъп до свойствата и методите на обект в JavaScript, както при други обекти, използва се точкова нотация:

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

object.property object.attribute object.method()

Помислете за пример:

Пример:нека html документът има етикет

и специфични за него css стил(дори два стила, вторият е полезен за заданието):

Необходимо:

1. задайте ново свойство на обект, присвоете му стойност и изведете тази стойност;
2. показва стойността на атрибут на обект;
3. промяна на стойността на атрибут на обект.

Да изпълним задачата по ред:
✍ Решение:

Оттогава език javascript, тогава обектът може да бъде измислен и да зададе всяко свойство с произволна стойност. Но първо, нека получим достъп до обекта (достъпът до обекта ще бъде разгледан подробно по-късно в този урок):

// получавате достъп до обекта чрез неговия id var element = document.getElementById("MyElem"); element.myProperty = 5; // присвояване на свойство alert(element.myProperty); // показване в диалоговия прозорец

Следващата задача е свързана с атрибута обект. Атрибут на обектаса атрибути на тагове. Тези. в нашия случай те са два: атрибутът class със стойност small и атрибутът id. Ще работим с атрибута клас.

Сега нека добавим малко javascript код, за да покажем стойността на атрибута на нашия обект. Кодът трябва да бъде следосновни тагове:

// получавате достъп до обекта чрез неговия id var element = document.getElementById("MyElem"); предупреждение(element.getAttribute("клас")); // показване в диалоговия прозорец

И последната задача: променете стойността на атрибута. За това сме подготвили стил голям. Променете стойността на атрибута клас на този стил:

// получавате достъп до обекта чрез неговия id var element = document.getElementById("MyElem"); element.setAttribute("клас","голям");

В резултат на това нашият елемент ще стане по-голям и ще стане син (клас голям).

Сега нека разгледаме по-подробно използваните в примера методи за работа с атрибути.

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

Атрибутите могат да се добавят, премахват и модифицират. Има специални методи за това:

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

getAttribute(attr)

• Проверка за наличието на този атрибут:

removeAttribute(attr)

Различни начини за работа с атрибути

Пример:Отпечатайте стойността на атрибута стойност на текстовия блок.

✍ Решение:

• Нека има текстов блок:

varelem = document.getElementById("MyElem"); var x = "стойност";

• Обмислете няколко начина за получаване на стойността на атрибут (за изход, използвайте метод за предупреждение()):

elem.getAttribute("стойност")

elem.getAttribute("стойност")

2. точка:

елемент.атрибути .стойност

елемент.атрибути.стойност

3. обозначение в скоби:


Задайте стойности на атрибутиМожете също да го направите по няколко начина:

var x = "ключ"; // ключ - име на атрибут, val - стойност на атрибут // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" ключ "] = "val" // 4. elem.setAttribute(x, "val")

свойства на елементите на тялото

Чрез обекта на документа можете да получите достъп до тялото на документа - етикета body - с някои от неговите полезни свойства.

Например етикетът body има две свойства: ширина и височина на клиентския прозорец:

document.body.clientHeight - височина на клиентския прозорец
document.body.clientWidth - ширина на клиентския прозорец


Но най-важното, както вече научихме, е, че чрез обекта на документа чрез специални методи се осъществява достъп до всички елементи на страницата, тоест тагове.

Важно:При достъп до етикети на страница като този, скриптът трябва да е в края на дървото на елемента, преди затварящото тяло! Тъй като по времето, когато скриптът се изпълни, всички елементи вече трябва да бъдат „начертани“ от браузъра на екрана

Работа js8_1. Отпечатайте съобщение за размера на прозореца на браузъра: например "размери на прозореца на браузъра 600 x 400"

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

Има няколко опции за достъп до обекти или търсене на обекти:

1. Търсене по id(или getElementById метод), връща конкретен елемент
2. Търсене по име на етикет(или метода getElementsByTagName), връща масив от елементи
3. Търсене по атрибут име(или метода getElementsByName), връща масив от елементи
4. Чрез родителски елементи(получаване на всички потомци)

Нека разгледаме всяка от опциите по-подробно.

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

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

Методът getElementById() връща самия елемент, който след това може да се използва за достъп до данни

Пример:Страницата има текстово поле с атрибут id="cake" :

...

Необходимо



✍ Решение:

предупреждение(document.getElementById("cake").value); // връща "брой торти"

Можете да направите същото, като имплементирате извикване на обект чрез променлива:

var a=document.getElementById("cake"); предупреждение (a.стойност); // изведе стойността на атрибута value, т.е. текст "брой торти"

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

Достъп до масив от елементи чрез името на етикета с име и чрез индекса на масива

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

Пример:Страницата има текстово поле (таг за въвеждане) с атрибут стойност:

...

Необходимо: отпечата стойността на неговия атрибут стойност

Методът getElementsByTagName организира достъпа до всички входни елементи чрез променлива (т.е. към масив от елементивход), дори ако този елемент е единственият на страницата. За да се обърнем към конкретен елемент, например към първия, посочваме неговия индекс (масивът започва от нулев индекс).

✍ Решение:

Позоваване на конкретен елемент чрез индекс:

var a =document.getElementsByTagName("вход"); предупреждение (a.стойност); // връща "брой торти"

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

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

Методът getElementsByName("...") връща масив от обекти, чийто атрибут name е равен на стойността, посочена като параметър на метода. Ако има само един такъв елемент на страницата, тогава методът пак връща масив (само с един единствен елемент).

Пример:Да кажем, че има елемент в документа:

var element = document.getElementsByName("MyElem"); предупреждение (елемент.стойност);

AT този примерима само един елемент, но препратката е към нулевия елемент на масива.

Важно: Методът работи само с онези елементи, за които атрибутът name е изрично предоставен в спецификацията: това са таговете form, input, a, select, textarea и редица други по-редки тагове.

Методът document.getElementsByName няма да работи с други елементи като div, p и т.н.

Достъп до децата на родителския елемент

Достъп до деца в javascriptсе случва чрез свойството childNodes. Свойството принадлежи на родителския обект.

document.getElementById (родител) .childNodes;

document.getElementById(родител).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; // масив от деца за (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Обърнете внимание, че е удобно да използвате цикъл за итерация на елементите на масив от деца. Тези. в нашия пример получаваме цикъл:

... за (var a в childMas) ( alert(childMas[ a] .src ) ; )

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

Други начини за достъп до елементи

Помислете за други начини Например:

<тяло> <formname="f"> <input type="text" id="t"> <тип вход = "бутон" id = "b" стойност = "(!LANG:бутон" > !} <изберете id="s" name="ss"> <option id = "o1" > 1</опция> <option id = "o2" > 3</опция> <option id = "o3" > 4</опция> </избор> </форма>

1 3 4

Достъп:

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

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

Пример:Създайте бутон и текстово поле в html документ. С помощта на скрипт оцветете фона на бутона (свойството style.backgroundColor на бутона) и покажете надпис "Здрасти!"в текстовото поле (атрибут стойност).

Html код:

document.getElementById("t1").value = "(!LANG:Здравейте!"; document.getElementById("b1").style.backgroundColor = "red";!}

Вариант 2:

document.getElementById ("t1" ) .setAttribute ("стойност" , ​​"Здравей!" ) ; document.getElementById("b1" ) .style .backgroundColor = "червен" ;

document.getElementById("t1").setAttribute("стойност","Здравей!"); document.getElementById("b1").style.backgroundColor = "червен";

Задача Js8_2.Създайте етикети на текстово поле според изображението на фигурата. Дайте им подходящите (показани на фигурата) стойности на атрибута id. С помощта на скрипта добавете стойността " 0 " към всички цифрови полета (приемайки числови стойности)

Проверка на коректността на въвеждане на данни във формуляра

Полето празно ли е?

На предоставените от потребителя данни не може да се вярва. Неразумно е да се предполага, че потребителите ще ги проверяват при въвеждане на данни. Така че трябва да използвате javascript за това.

За да се провери празно ли е текстовото поле(например, след като потребителят попълни данните от въпросник), трябва да се обърнете към свойството стойност. Ако стойността на свойството е празен низ (""), тогава трябва по някакъв начин да уведомите потребителя за това.

if(document.getElementById("name").value=="") (някое действие, например показване на съобщение с изискване за попълване на полето);

Освен това можете да правите без скрипт. Етикет въвеждане на текстполетата имат атрибут шаблон. като е посочена стойността му регулярен изразза валидиране на данните в даденото текстово поле на формуляра. Ако атрибутът присъства модел, тогава формулярът няма да бъде изпратен, докато това текстово поле не бъде попълнено правилно.
Например, за да проверите дали дадено поле е оставено празно:

Текст вместо числова стойност: функцията isNaN

Ако полето е въвеждане на числова стойност, а вместо това потребителят въвежда текст, е необходимо да се използва функцията isNaN (от англ. — Не е ли номер?), който проверява типа на входа и връща true, ако входът е текст вместо число.

Че. ако се върне true, тогава потребителят трябва да бъде подканен да въведе правилния формат, т.е. номер.

if(isNaN(document.getElementById("minutes").value))( Предупреждение, което ви подканва да въведете числови данни);

Дадена е страница с елементи за попълване:


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

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

<форма >Име:<input type="text" id="name"> Брой понички:<input type="text" id="donuts" > Минути:<input type="text" id="minutes"> Междинна сума:<input type="text" id="subitog" > Данък:<input type="text" id="tax"> Резултат:<input type="text" id="total"> <входен тип = "подаване" стойност = "(!LANG:подаване" onclick = "placeOrder();" > !} </форма> <script type="text/javascript"> ... </скрипт>

Име:
Брой понички:
Минути:
Междинна сума:
Данък:
Резултат:

Необходимо:
Попълнете празните места в кодовия фрагмент по-долу, който проверява дали две текстови полета са попълнени правилно: име(id="име") и минути(id="минути"). Използвайте отметка за оставяне на полето празно ("") и правилния формат за попълване на числовото поле (isNaN).

* Изпълнете работата и с атрибута pattern на текстовите полета, като използвате .

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

Използва се в код за изграждане трудни условияпремина по-рано.

Нова концепция за вас е извикването на функция като манипулатор на събитие на бутон:
onclick="placeOrder();"
Когато се щракне върху бутона, ще бъде извикана функцията placeOrder().

В тази статия ще се запознаем със свойствата и атрибутите на 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); // "марка" console.log(brandImg.className); // "марка" console.log(brandImg.src); // "/logo.svg?2" console.log(brandImg.alt); // "лого на сайта"

Някои имена на DOM свойства не съвпадат с имена на атрибути. Един от тях е атрибутът клас. Този атрибут съответства на DOM свойството className. Тази разлика се дължи на факта, че класът е ключова думав JavaScript, той е запазен и не може да се използва. Поради това разработчиците на стандарта решиха да използват друго име за съвпадение, което беше избрано като className.

Друг нюанс е свързан с факта, че преводът на HTML атрибутите, посочени в програмен коддокумент, свойствата на DOM не винаги се изпълняват едно към едно.

Ако даден елемент има нестандартен HTML атрибут, тогава не се създава свойство, съответстващо на него в DOM.

Друга разлика е, че стойностите на определени HTML атрибути и съответните им DOM свойства могат да бъдат различни. Тези. атрибут може да има една стойност, а DOM свойство, създадено от него, може да има друга стойност.

Един такъв атрибут е проверен.

Стойността на отметнатия HTML атрибут в този случай е празният низ. Но свойството, съответстващо на този атрибут в DOM, ще бъде зададено на true. защото според правилата на стандарта, за да зададете true, е достатъчно просто да споменете този атрибут в HTML кода и няма значение каква стойност ще има.

В този случай, дори ако не посочим атрибута checked в HTML кода за входния елемент с типа отметка, тогава свойството checked пак ще бъде създадено за него в DOM, но ще бъде равно на 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; // "предупреждение за предупреждение-информация" // получаване на DOM стойността на свойството заглавие var alertId = предупреждение. 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 елементите имат на страницата:

Променливи параграфи = document.querySelectorAll("p"); за (вар. i = 0, дължина = параграфи. дължина; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Пример, в който задаваме свойството lang на всички елементи с клас съдържание на "ru":

Var contents = document.querySelectorAll(".content"); за (променлива i = 0, дължина = contents.length; i< length; i++) { contents[i].lang = "ru"; }

Атрибути на елементи и методи за работа с тях

Атрибутите първоначално се задават в HTML кода. Въпреки че са свързани по някакъв начин със свойства, те не са едно и също нещо. В повечето случаи трябва да работите със свойства и да имате достъп до атрибути само когато наистина имате нужда от това.

Стойностите на атрибутите, за разлика от свойствата на DOM, както беше отбелязано по-горе, винаги са низове.

JavaScript има четири метода за извършване на операции, свързани с атрибути:

• .hasAttribute("attribute_name") – проверява дали елементът има посочения атрибут. Ако атрибутът, който се проверява, е върху елемента, тогава този методвръща true, в противен случай false.
• .getAttribute("attribute_name") - Получава стойността на атрибута. Ако елементът няма посочения атрибут, тогава този метод връща празен низ ("") или нула.
• .setAttribute("attribute_name", "attribute_value") – задава посочения атрибут със зададената стойност към елемента. Ако елементът има посочения атрибут, тогава този метод просто ще промени стойността му.
• .removeAttribute("attribute_name") - премахва посочения атрибут от елемента.

Разгледайте примери.

Силно интересен примерс атрибута стойност.

Пример с атрибут стойност

Вземете стойността на атрибута value и DOM свойството стойност:

// получаваме стойността на атрибута value на елемента name.getAttribute("value"); // "Боб" // получава стойността на стойността на свойството DOM name.value; // "Боб" // актуализиране на стойността на атрибута стойност, задаване на нова стойност name.setAttribute("value", "Tom"); // "Том" // получава DOM стойността на стойността на свойството name.value; // "Том"

Този пример показва, че когато атрибутът стойност се промени, браузърът автоматично променя съответно DOM свойството стойност.

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

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

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

Същото ще се случи, когато потребителят въведе текст в това поле. Свойството DOM на стойността ще съдържа действителната стойност, а съответният атрибут ще съдържа оригиналната стойност или тази, която сме задали, например с помощта на метода setAttribute.

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

Дори в случай, че трябва да получите първоначалната стойност, която задаваме в HTML, можете да използвате свойството. Свойството, което съдържа първоначалната стойност на атрибута value, се нарича defaultValue.

Name.defaultValue; // Том

Друг много интересен пример, но вече с атрибута href.

пример за href

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

В този пример атрибутът href и свойството href DOM съдържат различни значения. Атрибутът href е това, което задаваме в кода, а свойството DOM е пълният URL адрес. Това разграничение е продиктувано от стандарта, че браузърът трябва да прехвърли стойността href към пълния URL адрес.

Следователно, ако трябва да получим това, което е в атрибута, тогава в този случай не можем да направим без метода getAttribute.

И накрая, нека да разгледаме избрания атрибут.

Избран пример

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

без оценка 1 2 3 4 5

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

без оценка 1 2 3 4 5

Друг начин за работа с атрибути (свойство атрибути)

В JavaScript всеки елемент има свойство атрибути, което може да се използва за извличане на всички негови атрибути като обект NamedNodeMap.

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

Атрибут в тази колекция е достъпен чрез неговия индекс или чрез използване на метода item. Атрибутите в тази колекция се броят от 0.

Например, нека покажем всички атрибути на някакъв елемент в конзолата:

ОБИЧАМ JAVASCRIPT

Освен това, Можете също да работите с тази колекция, като използвате следните методи:

• .getNamedItem("attribute_name") – получава стойността на посочения атрибут (ако посоченият атрибут не съществува в елемента, тогава резултатът ще бъде нулев).
• .setNamedItem("item attribute") – добавя нов атрибут към елемент или актуализира стойността на съществуващ. За да създадете атрибут, трябва да използвате метода document.createAttribute(), на който трябва да се предаде името на атрибута като параметър. След това на създадения атрибут трябва да бъде присвоена стойност чрез свойството стойност.
• .removeNamedItem("attribute_name") – премахва указания атрибут от елемента (връща премахнатия атрибут като резултат).

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

ОБИЧАМ JAVASCRIPT

Задачи

• Отпечатайте в конзолата всички елементи на документа, които имат атрибут id.
• Добавете атрибут за заглавие към всички изображения на страницата, ако нямат този атрибут. Зададена стойност на атрибута равно на стойносттаатрибут alt.

Можете да създадете персонализирано обвързване подвързии,който ще провери стойността на конкретна наблюдаема величина булева стойностпреди да добавите или не атрибути. Вижте този пример:

Ko.bindingHandlers.attrIf = ( актуализация: функция (елемент, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (покажи) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(елемент).removeAttr(k); ) ) ) ); връзка

Иска ми се да мога просто да отговоря на @gbs, но не мога. Моето решение би било да имам две еднакви HTML елемент: един с атрибут, без него и нокаут условие за добавяне на един от тях според елемента. Също така знам за това обичайно чакане, но кое решение е по-ефективно?

Задава стойността на атрибут на посочения елемент. Ако атрибутът вече съществува, стойността се актуализира; в противен случай се добавя нов атрибут с указаното име и стойност.

Синтаксис

елемент.setAttribute( име, стойност);

Параметри

name DOMString, указващ името на атрибута, чиято стойност трябва да бъде зададена. Името на атрибута автоматично се преобразува изцяло в малки букви, когато setAttribute() се извика на HTML елемент в HTML документ. value DOMString, съдържащ стойността за присвояване на атрибута. Всяка указана стойност, която не е низ, се преобразува автоматично в низ.

Булевите атрибути се считат за верни, ако изобщо присъстват в елемента, независимо от действителната им стойност; като правило трябва да посочите празния низ ("") в стойност (някои хора използват името на атрибута; това работи, но е нестандартно). Вижте по-долу за практическа демонстрация.

Тъй като указаната стойност се преобразува в низ, указването на null не прави непременно това, което очаквате. Вместо да премахне атрибута или да зададе стойността му да бъде null, вместо това задава стойността на атрибута на низа "null". Ако искате да премахнете атрибут, извикайте removeAttribute().

върната стойност

Изключения

InvalidCharacterError Посоченото име на атрибут съдържа един или повече знаци, които не са валидни в имената на атрибути.

пример

В следващия пример setAttribute() се използва за задаване на атрибути на .

HTML

Здравей свят

JavaScript

var b = document.querySelector("бутон"); b.setAttribute("име", "helloButton"); b.setAttribute("забранено", "");

Това демонстрира две неща:

• Първото извикване на setAttribute() по-горе показва промяна на стойността на атрибута name на „helloButton“. Можете да видите това с помощта на инспектора на страниците на вашия браузър (Chrome, Edge, Firefox, Safari).
• За да зададете стойността на булев атрибут, като disabled, можете да посочите произволна стойност. Празен низ или името на атрибута са препоръчителни стойности. Всичко, което има значение, е, че ако атрибутът изобщо присъства, независимо от действителната му стойност, стойността му се счита за вярна. Липсата на атрибута означава, че стойността му е false. Като зададем стойността на атрибута disabled на празния низ (""), ние задаваме disabled на true, което води до деактивиране на бутона.

DOM методи, работещи с атрибутите на елемента:

Не са съобразени с пространството на имената, най-често използваните методи	Варианти, съобразени с пространството на имената (DOM ниво 2)	DOM Level 1 методи за работа с Attr възли директно (рядко се използва)	Методи, съобразени с пространството от имена на DOM ниво 2, за директно боравене с Attr възли (рядко се използва)
setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute(DOM2)	hasAttributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Спецификация

• DOM ниво 2 ядро: setAttribute (въведено в DOM ниво 1 ядро)

Съвместимост с браузър

Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.

Актуализирайте данните за съвместимост в GitHub

	работен плот						Подвижен
	Chrome	ръб, край	Firefox	Internet Explorer	Опера	сафари	android webview	Chrome за Android	Firefox за Android	Opera за Android	Safari на iOS	Интернет на Samsung
setAttribute	Пълна поддръжка на Chrome Да	Edge Пълна поддръжка 12	Пълна поддръжка на Firefox Да	IE Пълна поддръжка 5 бележки Пълна поддръжка 5 бележки бележки В Internet Explorer 7 и по-стари версии setAttribute не задава стилове и премахва събития, когато се опитате да ги зададете.	Пълна поддръжка на Opera Да	Пълна поддръжка на Safari 6	WebView Android Пълна поддръжка Да	Chrome Android Пълна поддръжка Да	Firefox Android Пълна поддръжка Да	Opera Android Пълна поддръжка Да	Safari iOS Пълна поддръжка Да	Samsung Internet Android Пълна поддръжка Да

Легенда

Пълна подкрепаПълна поддръжка Вижте бележките за изпълнение. Вижте бележките за изпълнение.

Бележки за гекон

Използването на setAttribute() за модифициране на определени атрибути, най-вече стойността в XUL, работи непоследователно, тъй като атрибутът определя стойността по подразбиране. За достъп или промяна на текущите стойности трябва да използвате свойствата. Например, използвайте Element.value вместо Element.setAttribute() .