Dars mavzuning boshlanishini o'z ichiga oladi: hujjat ob'ekt modeli (javaScript DOM) dinamik HTML asosidir, ob'ektga kirish usullari o'rganiladi va javascript hodisalarini qayta ishlash usullari ko'rib chiqiladi.

• Umuman olganda, ob'ekt - bu ko'plab qiymatlarni umumiy birlikka birlashtirgan va qiymatlarni saqlash va talab bo'yicha nomlari bo'yicha olish imkonini beruvchi kompozit ma'lumotlar turi.

Ilgari biz JavaScript-da kontseptsiya bilan tanishishni boshladik.

• Javascriptda DOM kabi narsa bor - Hujjat obyekti modeli— web-sahifaning obyekt modeli (html sahifa).
• Hujjat teglari yoki ular aytganidek, hujjat tugunlari uning ob'ektlari hisoblanadi.

Keling, diagrammani ko'rib chiqaylik JavaScript-da ob'ektlar ierarxiyasi, va ushbu mavzuda muhokama qilingan hujjat ob'ekti ierarxiyada qayerda joylashgan.

Skript elementi quyidagi atributlarga ega:

kechiktirish (sahifaning to'liq yuklanishini kutish).

Misol:

/* Js fayllarni parallel ravishda yuklash va sahifaning qolgan qismini qayta ishlashni kutmasdan, yuklangandan so'ng darhol bajarilishiga ruxsat beradi */ /* Brauzerga sahifani keyingi qayta ishlashni to'xtatmasdan, JS fayllarini parallel ravishda yuklashni boshlash imkonini beradi. Ularning bajarilishi hujjat ob'ekt modeli to'liq tahlil qilingandan so'ng sodir bo'ladi */

JavaScript-dagi hujjat ob'ektining xossalari va atributlari

Hujjat obyekti veb-sahifani ifodalaydi.

Muhim: JavaScript-da ob'ektning xossalari va usullariga kirish uchun, boshqa ob'ektlar bilan ishlashda bo'lgani kabi, nuqta belgisi qo'llaniladi:

bular. avval ob'ektning o'zi yoziladi, keyin uning xususiyati, atributi yoki usuli nuqta orqali va bo'sh joysiz ko'rsatiladi

obyekt.property obyekti.atribut obyekti.method()

Keling, bir misolni ko'rib chiqaylik:

Misol: html hujjatida teg bo'lsin

Mening elementim

va unga xos css uslubi(hatto ikkita uslub, ikkinchisi vazifa uchun foydali bo'ladi):

.kichik( rang : qizil ; shrift oʻlchami : kichik ; ) .katta( rang : koʻk ; shrift oʻlchami : katta; )

.kichik( rang:qizil; shrift oʻlchami:kichik; ) .katta( rang:koʻk; shrift oʻlchami:katta; )

Kerakli:

ob'ektning yangi xossasini o'rnatish, unga qiymat berish va bu qiymatni ko'rsatish;

ob'ekt atributining qiymatini ko'rsatish;

ob'ekt atributining qiymatini o'zgartirish.

Keling, vazifani tartibda bajaramiz:
✍ Yechim:

Shundan beri javascript tili, keyin ob'ektni ixtiro qilish va istalgan qiymatga ega bo'lgan har qanday xususiyatni belgilash mumkin. Lekin birinchi navbatda, ob'ektga kirishga ruxsat beramiz (ob'ektga kirish ushbu darsda keyinroq batafsil muhokama qilinadi):

// ob'ektga id bo'yicha kirish var element = document.getElementById("MyElem"); element.myProperty = 5; // xususiyat ogohlantirishini tayinlash (element.myProperty); // dialog oynasida ko'rsatish

Keyingi vazifa ob'ekt atributi bilan bog'liq. Ob'ekt atributi tegning atributlaridir. Bular. bizning holatlarimizda ulardan ikkitasi bor: kichik qiymatli sinf atributi va id atributi. Biz sinf atributi bilan ishlaymiz.

Endi ob'ektimizning atribut qiymatini ko'rsatish uchun javascript kodini qo'shamiz. Kod bo'lishi kerak keyin asosiy teglar:

// ob'ektga id bo'yicha kirish var element = document.getElementById("MyElem"); alert(element.getAttribute("sinf")); // dialog oynasida ko'rsatish

Va oxirgi vazifa: atribut qiymatini o'zgartirish. Buning uchun bizda uslub bor. "katta". Class atributining qiymatini ushbu uslub bilan almashtiramiz:

// ob'ektga id bo'yicha kirish var element = document.getElementById("MyElem"); element.setAttribute("sinf", "katta");

Natijada, bizning elementimiz kattaroq bo'ladi va ko'k rangga aylanadi (katta sinf).

Endi atributlar bilan ishlash uchun misolda qo'llaniladigan usullarni batafsil ko'rib chiqamiz.

JavaScript-da atributlar bilan ishlash usullari

Atributlarni qo'shish, o'chirish va o'zgartirish mumkin. Buning uchun maxsus usullar mavjud:

• Atribut qo'shish (uning uchun yangi qiymat o'rnatish):

getAttribute(attr)

• Ushbu atributning mavjudligini tekshirish:

removeAttribute(attr)

Atributlar bilan ishlashning turli usullari

Misol: Matn blokining qiymat atributining qiymatini chop eting.

✍ Yechim:

• Matn bloki bo'lsin:

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

• Keling, atribut qiymatini olishning bir necha usullarini ko'rib chiqaylik (chiqish uchun alert() usulidan foydalaning):

elem.getAttribute("qiymat")

elem.getAttribute("qiymat")

2. nuqta belgisi:

element.attributes.value

element.attributes.value

3. qavs belgisi:

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


Bundan tashqari, atribut qiymatlarini bir necha usul bilan o'rnatishingiz mumkin:

var x = "kalit"; // kalit - atribut nomi, val - atribut qiymati // 1. elem.setAttribute("kalit", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Tana elementining xususiyatlari

Hujjat ob'ekti orqali siz hujjatning asosiy qismiga - tana tegiga - ba'zi foydali xususiyatlarga ega bo'lishingiz mumkin.

Masalan, tana tegi ikkita xususiyatga ega: mijoz oynasining kengligi va balandligi:

document.body.clientHeight — mijoz oynasining balandligi
document.body.clientWidth — mijoz oynasining kengligi


Lekin eng muhimi, biz allaqachon bilib olganimizdek, hujjat ob'ekti orqali maxsus usullar orqali sahifaning barcha elementlariga, ya'ni teglarga kirish ta'minlanadi.

Muhim: Sahifa teglariga shu tarzda kirishda skript tanani yopishdan oldin elementlar daraxtining oxirida bo'lishi kerak! Skript bajarilganda, barcha elementlar brauzer tomonidan ekranda "chizilgan" bo'lishi kerak.

Ish js8_1. Brauzer oynasining o'lchami haqida xabarni ko'rsating: masalan, "brauzer oynasi o'lchamlari 600 x 400"

JavaScript-da hujjat elementlariga kirish

Ob'ektlarga kirish yoki qidirishning bir nechta variantlari mavjud:

Id bo'yicha qidirish (yoki getElementById usuli), ma'lum bir elementni qaytaradi

Teg nomi bo'yicha qidirish (yoki getElementsByTagName usuli), elementlar qatorini qaytaradi

Name atributi bo'yicha qidirish (yoki getElementsByName usuli), elementlar massivini qaytaradi

Ota-ona elementlari orqali (barcha bolalarni olish)

Keling, har bir variantni batafsil ko'rib chiqaylik.

Elementga uning id atributi orqali kirish

Sintaksis: document.getElementById(id)

getElementById() usuli elementning o'zini qaytaradi, undan keyin ma'lumotlarga kirish uchun foydalanish mumkin

Misol: Sahifada id="cake" atributiga ega matn maydoni mavjud:

...

Kerakli

✍ Yechim:

alert(document.getElementById("cake").value); // "pirojnoe sonini" qaytaradi

Ob'ektga o'zgaruvchi orqali kirish orqali siz xuddi shu narsani qilishingiz mumkin:

var a=document.getElementById("cake"); ogohlantirish (a.qiymat); // qiymat atributining qiymatini ko'rsatish, ya'ni. "pirojnoe soni" matni

Muhim: skript tegdan keyin joylashgan bo'lishi kerak!

Elementlar massiviga nom tegi va massiv indeksi orqali kirish

Sintaksis:
document.getElementsByTagName(nom);

Misol: Sahifada qiymat atributiga ega matn maydoni (kirish tegi) mavjud:

...

Majburiy: uning qiymat atributining qiymatini ko'rsatish

getElementsByTagName usuli o'zgaruvchi orqali barcha kirish elementlariga (ya'ni, kiritish elementlari massivi) kirishni ta'minlaydi, hatto bu element sahifadagi yagona bo'lsa ham. Muayyan elementga, masalan, birinchisiga kirish uchun biz uning indeksini ko'rsatamiz (massiv indeks noldan boshlanadi).

✍ Yechim:

Biz ma'lum bir elementga indeks bo'yicha kiramiz:

var a =document.getElementsByTagName("input"); ogohlantirish (a.qiymat); // "pirojnoe sonini" qaytaradi

Name atributining qiymati bo'yicha elementlar massiviga kirish

Sintaksis:
document.getElementsByName(nom);

getElementsByName("...") usuli nom atributi usul parametri sifatida ko'rsatilgan qiymatga teng bo'lgan ob'ektlar massivini qaytaradi. Agar sahifada faqat bitta shunday element mavjud bo'lsa, u holda usul hali ham massivni qaytaradi (faqat bitta element bilan).

Misol: hujjatda element bor deylik:

var element = document.getElementsByName("MyElem"); ogohlantirish (element.qiymat);

IN bu misolda faqat bitta element mavjud, lekin massivning nol elementiga kirish amalga oshiriladi.

Muhim: Usul faqat spetsifikatsiyada nom atributi aniq ko'rsatilgan elementlar bilan ishlaydi: bular form , input , a , select , textarea va boshqa bir qator kam uchraydigan teglar.

document.getElementsByName usuli div , p va boshqalar kabi boshqa elementlar bilan ishlamaydi.

Asosiy elementning avlodlariga kirish

Bolalarga javascriptda childNodes xususiyati orqali kirish mumkin. Mulk asosiy ob'ektga tegishli.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Keling, rasm teglari div tegi deb ataladigan konteynerga joylashtirilgan misolni ko'rib chiqaylik. Shunday qilib, div yorlig'i tasvir ma'lumotlarining ota-onasi bo'lib, img teglarining o'zi esa div tegining bolalari hisoblanadi:

Endi chiqamiz modal oyna massiv elementlarining avlodlari bilan qiymatlari, ya'ni. img teglari:

var myDiv=document.getElementById("div_for_img"); // ota-konteynerga kirish var childMas=myDiv.childNodes; // uchun avlodlar massivi (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

E'tibor bering, nasl massivining elementlarini takrorlash uchun tsikldan foydalanish qulay. Bular. Bizning misolimizda biz tsiklni olamiz:

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

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

Elementlarga kirishning boshqa usullari

Keling, misol yordamida boshqa usullarni ko'rib chiqaylik:

1 3 4

1 3 4

Kirish:

... // keraksiz va eskirgan element kirish qurilmalari: alert(document.forms [ 0 ] .name ); // f alert(document.forms [ 0 ] .elementlar [ 0 ] .type ); // matnli ogohlantirish(document.forms [ 0 ] .elementlar [ 2 ] .options [ 1 ] .id ); // o2 alert(document.f .b .type ); // tugma ogohlantirishi(document.f .s .name ); // ss alert(document.f .s .options [ 1 ] .id ); // o2 // elementlarga kirish uchun afzal usullar alert(document.getElementById ("t" ) .type ); // matnli alert(document.getElementById ("s" ) .name ); // ss alert(document.getElementById ("s") .options [ 1 ] .id ); // 02 alert(document.getElementById ("o3" ) .text ); // 4 ...

... // kiruvchi va eskirgan elementga kirish usullari: alert(document.forms.name); // f alert(document.forms.element.type); // matnli ogohlantirish (document.forms.elements.options.id); // o2 alert(document.f.b.type); // tugma ogohlantirishi(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // elementlarga kirish uchun afzal usullar alert(document.getElementById("t").type); // matnli ogohlantirish(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Misol: HTML hujjatida tugma va matn maydoni yarating. Skriptdan foydalanib, tugma fonini ranglang (tugmaning style.backgroundColor xususiyati) va yozuvni aks ettiring. "Salom!" matn maydonida (qiymat atributi).

HTML kodi:

document.getElementById("t1").value = "Salom!"; document.getElementById("b1").style.backgroundColor = "red";!}

Variant 2:

document.getElementById ("t1" ) .setAttribute ("qiymat" , "Salom!" ); document.getElementById("b1" ) .style .backgroundColor = "qizil" ;

document.getElementById("t1").setAttribute("qiymat","Salom!"); document.getElementById("b1").style.backgroundColor = "qizil";

Js8_2 vazifa. Rasmda ko'rsatilganidek, matn maydoni teglarini yarating. Ularga mos keladigan (rasmda ko'rsatilgan) id atribut qiymatlarini bering. Skriptdan foydalanib, barcha raqamli maydonlarga “0” qiymatini qo'shing (raqamli qiymatlarni hisobga olgan holda)

Shakl ma'lumotlarining to'g'ri kiritilganligini tekshirish

Maydon bo'sh qoldimi?

Foydalanuvchi kiritishiga ishonib bo‘lmaydi. Foydalanuvchilar ma'lumotlarni kiritishda ma'lumotlarni tekshiradi deb taxmin qilish asossizdir. Bu shuni anglatadiki, buning uchun javascriptdan foydalanishingiz kerak.

Matn maydoni bo'sh qoldirilganligini tekshirish uchun (masalan, foydalanuvchi qandaydir shakl ma'lumotlarini to'ldirgandan so'ng), siz qiymat xususiyatiga murojaat qilishingiz kerak. Agar mulk qiymati bo'lsa bo'sh qator(""), bu foydalanuvchini qandaydir tarzda xabardor qilish kerakligini anglatadi.

if(document.getElementById("name").value=="") (ba'zi harakatlar, masalan, maydonni to'ldirishingizni so'ragan xabarni ko'rsatish);

Bundan tashqari, siz skriptsiz qilishingiz mumkin. Kirish tegida matn maydoni naqsh atributi mavjud. uning qiymati ko'rsatilgan muntazam ifoda berilgan shakl matn maydonidagi ma'lumotlarni tekshirish uchun. Agar atribut mavjud bo'lsa naqsh, keyin ushbu matn maydoni to'g'ri to'ldirilmaguncha ariza topshirilmaydi.
Masalan, maydon bo'sh qolganligini tekshirish uchun:

Buning o'rniga matn raqamli qiymat: funksiya NaN

Agar maydon raqamli qiymatni kiritishni talab qilsa, lekin uning o'rniga foydalanuvchi matn kiritsa, isNaN funksiyasidan foydalanish kerak. "raqam emasmi?"), bu kiritilgan ma'lumotlarning turini tekshiradi va raqamli ma'lumotlar o'rniga matnli ma'lumotlar kiritilsa, haqiqiyligini qaytaradi.

Bu. agar rost qaytarilsa, foydalanuvchi to'g'ri formatni kiritish uchun xabardor qilinishi kerak, ya'ni. raqam.

if(isNaN(document.getElementById("daqiqalar").value))( raqamli ma'lumotlarni kiritishni talab qiluvchi ogohlantirish);

To'ldirish uchun elementlarga ega sahifa berilgan:


Fragment html kodi:

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

Nomi: Donutlar soni: Daqiqalar: Xulosa: Soliq: Natija: ...

Nomi:
Donutlar soni:
Daqiqalar:
Xulosa:
Soliq:
Natija:
...

Kerakli:
Quyidagi kod parchasidagi bo'sh joylarni to'ldiring, bu ikkita matn maydoni to'g'ri to'ldirilganligini tekshiradi: Ism(id = "ism") va daqiqa(id="daqiqa"). Maydon bo'sh qoldirilganligiga ("") va raqamli maydon to'g'ri to'ldirilganligiga (isNaN) ishonch hosil qilish uchun tekshiruvlardan foydalaning.

* Vazifani matn maydonlarining naqsh atributi yordamida ham bajaring.

Skript fragmenti:

Kod murakkab sharoitlarni yaratish uchun avval o'rganilgan shartlardan foydalanadi.

Siz uchun yangi kontseptsiya funksiyani tugma hodisasi ishlovchisi sifatida chaqiradi:
onclick="placeOrder();"
Tugma bosilganda placeOrder() funksiyasi chaqiriladi

Siz odat yaratishingiz mumkin bog'lovchi bog'lash, bu atributlarni qo'shish yoki qo'shmaslikdan oldin ma'lum bir kuzatilishi mumkin bo'lgan mantiqiy qiymatini tekshiradi. Ushbu misolga qarang:

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

Men shunchaki @gbs ga javob berishni xohlardim, lekin qila olmayman. Mening yechimim ikkita bir xil bo'lishi kerak HTML elementi: atributga ega bo'lgan, unsiz va elementga muvofiq ulardan birini qo'shish uchun nokaut sharti. Men ham bu umumiy taxminni bilaman, ammo qaysi yechim samaraliroq?

Ushbu qo'llanma jQuery-da element atributlarini o'qish va o'zgartirish haqida.

Atributlar tegdagi elementlarga tayinlangan nom/qiymat juftligidir. Atributlarga misollar ( href, sarlavha, src, sinf):

Mana xulosa matni

• attr() atributlarini o'qish, qo'shish va o'zgartirish uchun
• atributlarni olib tashlash uchun removeAttr().

Ushbu dars attr() va removeAttr() usullari bilan ishlashni o'z ichiga oladi.

Boshqa darsda tasvirlangan CSS sinflari bilan ishlash uchun maxsus jQuery usullari mavjud. JQuery-da loyiha ustida ishlayotganda, siz CSS sinflarini juda ko'p manipulyatsiya qilishingiz kerak va sinf atributi bir nechta sinf nomlarini o'z ichiga olishi mumkin, bu esa u bilan ishlashni boshqa atributlarga qaraganda ancha murakkablashtiradi.

Agar siz kiritish maydonlarining qiymatlari bilan ishlamoqchi bo'lsangiz, u holda qiymat atributi bilan ishlashning soddalashtirilgan usulini ta'minlabgina qolmay, balki qiymatlarni o'qish va sozlash imkonini beruvchi val() usulidan foydalanish yaxshiroqdir. tanlash ro'yxatining tanlangan elementlarida.

Atribut qiymatini o'qish

Element atributining qiymatini o'qish oddiy. Siz faqat elementni o'z ichiga olgan jQuery ob'ektida attr() usulini chaqirishingiz va unga o'qish uchun atribut nomini berishingiz kerak. Usul atribut qiymatini qaytaradi:

// #myLink elementi ogohlantirishining "href" atributining qiymatini chop eting ($("a#myLink").attr("href"));

Agar jQuery ob'ektingizda bir nechta elementlar bo'lsa, attr() usuli faqat to'plamdagi birinchi element uchun atribut qiymatlarini o'qiydi.

Atribut qiymatlarini sozlash

attr() usuli atribut qiymatlarini qo'shish yoki o'zgartirish uchun ham ishlatilishi mumkin:

• Agar atribut mavjud emas elementda, u bo'ladi qo'shildi va unga belgilangan qiymat beriladi.
• Agar atribut allaqachon mavjud, uning qiymati bo'ladi yangilangan berilgan qiymat.

Attributlarni qo'shish yoki o'zgartirish uchun attr() usulidan foydalanishning uchta usuli mavjud:

Har qanday element (yoki elementlar to'plami) uchun atributlarni qo'shishingiz/o'zgartirishingiz mumkin.

Atribut nomlari va qiymatlari xaritasini ko'rsatib, element (yoki elementlar) uchun bir vaqtning o'zida bir nechta atributlarni qo'shishingiz/o'zgartirishingiz mumkin.

qayta qo'ng'iroq qilish funktsiyasidan foydalanib, bir nechta elementlar uchun bitta atributni dinamik ravishda qo'shishingiz/o'zgartirishingiz mumkin.

Bitta atributni o'rnating

Element atributini o'rnatish yoki o'zgartirish uchun atribut nomi va qiymatini ko'rsatuvchi attr() usulini chaqirishingiz kerak. Masalan:

// #myLink elementining "href" atributining qiymatini "http://www.example.com/" qiymatiga o'zgartiring // (agar "href" atributi mavjud bo'lmasa, u avtomatik ravishda yaratiladi) $("a#myLink"). attr("href", "http://www.example.com/");

Bir nechta element uchun bir xil atributni o'rnatish ham mumkin:

Xarita yordamida bir nechta atributlarni o'rnatish

Xarita yordamida bir yoki bir nechta elementlarga bir vaqtning o'zida bir nechta atributlarni o'rnatishingiz mumkin. Bu shunday ko'rinadigan nom/qiymat juftliklari ro'yxati:

(ism1: qiymat1, nom2: qiymat2, ... )

Quyidagi misol img elementida bir vaqtning o'zida ikkita atributni o'rnatadi:

// Img elementi uchun "src" va "alt" atributlarini o'rnating #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Mening suratim" )) ;

Bundan tashqari, bir nechta elementlar uchun atributlarni o'rnatishingiz mumkin:

// Barcha img elementlari uchun "src" va "alt" atributlarini o'rnating $("img").attr(( "src": "mypic.jpg", "alt": "Mening fotosuratim" ));

Qayta qo'ng'iroq qilish funktsiyasi yordamida atributlarni o'rnatish

Attribut qiymatlarini attr() usuliga o'tkazish o'rniga, qayta qo'ng'iroq qilish funktsiyasi nomini o'tkazishingiz mumkin. Shunday qilib, elementning joylashuvi, mavjud atribut qiymati yoki boshqa xususiyatlar asosida bir nechta elementlar uchun atribut qiymatlarini dinamik ravishda o'rnatishingiz mumkin.

Qaytish funktsiyasi ikkita argument olishi kerak:

• Joriy tanlangan elementning to'plamdagi o'rni indeksi (noldan boshlanadi)
• joriy tanlangan element uchun eski atribut qiymati

Funktsiya tomonidan qaytarilgan qiymat atribut qiymatini almashtirish uchun ishlatiladi.

Elementning joriy holati va atributning eski qiymatiga qo'shimcha ravishda, sizning funksiyangiz elementning o'ziga kalit yordamida kirishi mumkin. bu so'zlar. Shunday qilib, qayta qo'ng'iroq qilish funktsiyasidan istalgan element xususiyatiga yoki usuliga kirishingiz mumkin.

Misolda tasvirning joylashuvi va uning src atributiga qarab sahifadagi har bir rasmga alt atributini qo‘shish uchun qayta qo‘ng‘iroq qilish funksiyasidan foydalaniladi:

$(init); init() ( // Barcha "img" elementlari uchun "alt" atributini o'rnating $("img").attr("alt", setAltText); funktsiya setAltText(indeks, attributeValue) (qaytish ("Rasm"). + (indeks +1) + ": " + this.src); ) )

Kodni ishga tushirgandan so'ng, birinchi rasm "1-rasm: myphoto.jpg" qiymatiga ega alt atributga ega bo'ladi va ikkinchi rasm "2-rasm: yourphoto.jpg" qiymatiga ega bo'lgan alt atributga ega bo'ladi.

Atributni olib tashlash

Elementdan atributni olib tashlash uchun siz olib tashlash atributining nomini berib, removeAttr() usulini chaqirishingiz kerak. Masalan:

// #myLink elementidan "title" atributini olib tashlang $("a#myLink").removeAttr("title");

Bir nechta elementlarni o'z ichiga olgan jQuery ob'ektida removeAttr() usulini ham chaqirishingiz mumkin. removeAttr() usuli belgilangan atributni barcha elementlardan olib tashlaydi:

// Barcha havolalardan "title" atributini olib tashlang $("a").removeAttr("title");

Xulosa

Ushbu dars jQuery da element atributlari bilan ishlash masalalarini ko'rib chiqdi:

• Atribut qiymatlarini o'qish
• Bitta atributni o'rnatish
• Bir vaqtning o'zida bir nechta turli atributlarni o'rnatish
• Elementlar to'plamiga atribut qiymatlarini dinamik ravishda o'rnatish uchun qayta qo'ng'iroq qilish funktsiyasidan foydalanish
• Elementdan atributlarni olib tashlash

Belgilangan elementga atribut qiymatini o'rnatadi. Agar atribut allaqachon mavjud bo'lsa, qiymat yangilanadi; aks holda ko'rsatilgan nom va qiymat bilan yangi atribut qo'shiladi.

Sintaksis Element.setAttribute( nomi, qiymat); Parametrlar nomi qiymati o'rnatilishi kerak bo'lgan atribut nomini ko'rsatadigan DOMString. HTML hujjatidagi HTML elementida setAttribute() chaqirilganda atribut nomi avtomatik ravishda barcha kichik harflarga aylantiriladi. qiymat Atributga tayinlanadigan qiymatni o'z ichiga olgan DOMString. Belgilangan satr bo'lmagan har qanday qiymat avtomatik ravishda satrga aylantiriladi.

Mantiqiy atributlar, agar ular haqiqiy qiymatidan qat'i nazar, elementda umuman mavjud bo'lsa, haqiqiy deb hisoblanadi; qoida tariqasida, qiymatda bo'sh qatorni ("") ko'rsatish kerak (ba'zi odamlar atribut nomidan foydalanadilar); bu ishlaydi, lekin nostandart). Amaliy namoyish uchun quyida ko'ring.

Belgilangan qiymat satrga aylantirilganligi sababli, nullni belgilash siz kutgan narsani bajarmaydi. Atributni olib tashlash yoki uning qiymatini null qilib belgilash o'rniga, atributning qiymatini “null” qatoriga o'rnatadi. Agar siz atributni o'chirmoqchi bo'lsangiz, removeAttribute() ni chaqiring.

Qaytish qiymati Istisnolar InvalidCharacterError Belgilangan atribut nomi atribut nomlarida yaroqsiz bo'lgan bir yoki bir nechta belgilarni o'z ichiga oladi. Misol

Quyidagi misolda setAttribute() atributlarni o'rnatish uchun ishlatiladi.

HTML Hello World JavaScript var b = document.querySelector("button"); b.setAttribute("ism", "salomButton"); b.setAttribute("o'chirilgan", "");

Bu ikkita narsani ko'rsatadi:

• Yuqoridagi setAttribute() ga birinchi qoʻngʻiroq nom atributi qiymatini “helloButton” ga oʻzgartirishni koʻrsatadi. Buni brauzeringiz sahifa inspektori (Chrome, Edge, Firefox, Safari) yordamida koʻrishingiz mumkin.
• Disabled kabi mantiqiy atributning qiymatini belgilash uchun istalgan qiymatni belgilashingiz mumkin. Bo'sh satr yoki atribut nomi tavsiya etilgan qiymatlardir. Muhimi shundaki, agar atribut umuman mavjud bo'lsa, uning haqiqiy qiymatidan qat'i nazar, uning qiymati rost deb hisoblanadi. Atributning yo'qligi uning qiymati noto'g'ri ekanligini anglatadi. Disabled atributining qiymatini bo'sh satrga ("") o'rnatish orqali biz disabledni true ga o'rnatamiz, bu esa tugmani o'chirib qo'yishiga olib keladi.

Elementning atributlari bilan ishlaydigan DOM usullari:

Nomlar maydonidan xabardor emas, eng ko'p ishlatiladigan usullar Nomlar maydonidan xabardor variantlar (DOM 2-darajali) Attr tugunlari bilan to'g'ridan-to'g'ri ishlash uchun DOM 1-darajali usullari (kamdan-kam qo'llaniladi) Attr tugunlari bilan to'g'ridan-to'g'ri ishlash uchun DOM 2-darajali nom maydonidan xabardor usullar (kamdan-kam qo'llaniladi)

setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute(DOM2)	hasAttributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Spetsifikatsiya

• DOM 2-darajali yadrosi: setAttribute (DOM 1-darajali yadrosida kiritilgan)

Brauzer mosligi

Ushbu sahifadagi muvofiqlik jadvali tuzilgan ma'lumotlardan yaratilgan. Agar siz maʼlumotlarga oʻz hissangizni qoʻshmoqchi boʻlsangiz, iltimos, https://github.com/mdn/browser-compat-data manziliga tashrif buyuring va bizga tortish soʻrovini yuboring.

GitHub-da muvofiqlik ma'lumotlarini yangilang

Mobil ish stoli Chrome Edge Firefox Internet Explorer Opera Safari Android veb-ko'rinishi Android uchun Chrome Android uchun Firefox Android uchun Opera Android uchun Safari iOS Samsung Internet-dasetAttribute

Chrome to'liq qo'llab-quvvatlash Ha	Edge to'liq qo'llab-quvvatlash 12	Firefox To'liq qo'llab-quvvatlash Ha	IE To'liq qo'llab-quvvatlash 5 Eslatmalar To'liq qo'llab-quvvatlash 5 Eslatmalar Eslatmalar Internet Explorer 7 va undan oldingi versiyalarida setAttribute uslublarni o'rnatmaydi va ularni o'rnatishga harakat qilganingizda hodisalarni olib tashlaydi.	Opera to'liq qo'llab-quvvatlash Ha	Safari to'liq qo'llab-quvvatlash 6	WebView Android to'liq qo'llab-quvvatlash Ha	Chrome Android to'liq qo'llab-quvvatlash Ha	Firefox Android to'liq qo'llab-quvvatlash Ha	Opera Android To'liq qo'llab-quvvatlash Ha	Safari iOS to'liq qo'llab-quvvatlash Ha	Samsung Internet Android To'liq qo'llab-quvvatlash Ha

Legend Toʻliq qoʻllab-quvvatlash Toʻliq qoʻllab-quvvatlash Amalga oshirish eslatmalariga qarang. Amalga oshirish eslatmalariga qarang. Gecko eslatmalari

Ba'zi atributlarni o'zgartirish uchun setAttribute() dan foydalanish, ayniqsa XUL'dagi qiymat, nomuvofiq ishlaydi, chunki atribut standart qiymatni belgilaydi. Joriy qiymatlarga kirish yoki ularni o'zgartirish uchun xususiyatlardan foydalanishingiz kerak. Masalan, Element.setAttribute() o'rniga Element.value dan foydalaning.

Ushbu maqolada biz DOM xususiyatlari va atributlari bilan tanishamiz, ular qanday farq qilishini va ular bilan qanday qilib to'g'ri ishlashni ko'rib chiqamiz. Keling, atributlar ustida amallarni bajarish uchun JavaScript-ning qanday usullari borligini ko'rib chiqaylik.

Atribut va DOM xususiyati o'rtasidagi farq nima?

Atributlar HTML ob'ektlari bo'lib, ular yordamida HTML kodidagi elementlarga ma'lum ma'lumotlarni qo'shishimiz mumkin.

Brauzer sahifani so'raganda, u HTML manba kodini oladi. Shundan so'ng, u ushbu kodni tahlil qiladi va uning asosida DOM quradi. Ushbu jarayon davomida elementlarning HTML atributlari mos keladigan DOM xususiyatlariga tarjima qilinadi.

Misol uchun, brauzer HTML kodining quyidagi qatorini o'qiyotganda ushbu element uchun quyidagi DOM xususiyatlarini yaratadi: id , className , src va alt .

Ushbu xususiyatlarga ob'ekt xususiyatlari sifatida JavaScript kodida kirish mumkin. Bu yerdagi ob'ekt DOM tugunidir (element).

Yuqorida keltirilgan element uchun DOM xususiyatlarining qiymatlarini oladigan va ularning qiymatlarini konsolga chiqaradigan misol:

// elementni oling var brandImg = document.querySelector("#brand"); // elementning DOM xususiyatlarining qiymatlarini console.log(brandImg.id) da ko'rsatish; // "brend" console.log(brandImg.className); // "brend" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "sayt logotipi"

Ba'zi DOM mulk nomlari atribut nomlariga mos kelmaydi. Ulardan biri sinf atributidir. Bu atribut DOM xususiyati className bilan mos keladi. Bu farq sinfning mavjudligi bilan bog'liq kalit so'z JavaScript-da u zahiralangan va foydalanilmaydi. Shu sababli, standartni ishlab chiquvchilar sinf nomi sifatida tanlangan muvofiqlik uchun boshqa nomdan foydalanishga qaror qilishdi.

Yana bir nuance HTML atributlarini tarjima qilishda ko'rsatilganligi bilan bog'liq manba kodi hujjat, DOM xususiyatlari har doim ham birma-bir amalga oshirilmaydi.

Agar element nostandart HTML atributiga ega bo'lsa, DOMda unga mos keladigan xususiyat yaratilmaydi.

// elementni oling mydiv = document.querySelector("#mydiv"); // elementning alt xususiyati qiymatini oling va uni console.log(mydiv.alt) ga chiqaring; // aniqlanmagan // elementning alt atributining qiymatini oling va uni konsolga chiqaring console.log(mydiv.getAttribute("alt")); // "..."

Yana bir farq shundaki, ba'zi HTML atributlarining qiymatlari va ularga mos keladigan DOM xususiyatlari har xil bo'lishi mumkin. Bular. atribut bitta qiymatga ega bo'lishi mumkin va uning asosida yaratilgan DOM xususiyati boshqa bo'lishi mumkin.

Ushbu atributlardan biri tekshiriladi.

Bu holda tekshirilgan HTML atributining qiymati bo'sh qatordir. Biroq, DOMdagi berilgan atributga mos keladigan xususiyatga ega bo'ladi rost. Chunki standart qoidalariga ko'ra, rost belgilash uchun HTML kodida ushbu atributni eslatib o'tish kifoya va u qanday qiymatga ega bo'lishi muhim emas.

Bundan tashqari, agar biz HTML kodida belgilangan belgini kiritish elementi uchun belgilanmagan atributni belgilamasak ham, DOMda uning uchun belgilangan xususiyat baribir yaratiladi, lekin u yolg'onga teng bo'ladi.

Bundan tashqari, JavaScript sizga atributlar bilan ishlash imkonini ham beradi. Buning uchun DOM API-da maxsus usullar mavjud. Ammo ulardan faqat shu tarzda ma'lumotlar bilan ishlash kerak bo'lganda foydalanish tavsiya etiladi.

Shu bilan birga, bilishingiz kerakki, biz elementning DOM xususiyatini o'zgartirganimizda, tegishli atribut ham o'zgaradi va aksincha. Ammo brauzerlarda bu jarayon har doim ham birma-bir bajarilmaydi.

DOM xususiyatlari va atributlari o'rtasidagi asosiy farqlar:

• atribut qiymati har doim satr bo'ladi va DOM xossa qiymati ma'lum bir ma'lumot turidir (mavjud qator bo'lishi shart emas);
• Atribut nomi katta-kichik harflarni sezmaydi, DOM xususiyatlari esa katta-kichik harflarni sezmaydi. Bular. HTML kodida biz, masalan, HTML id atributini Id , ID va boshqalar sifatida yozishimiz mumkin. Xuddi shu narsa biz u bilan ishlash uchun maxsus JavaScript usullarida ko'rsatgan atribut nomiga ham tegishli. Lekin biz mos keladigan DOM xususiyatiga faqat id orqali kira olamiz va boshqa hech narsa yo'q.

Elementning DOM xossalari bilan ishlash

JavaScript-da elementlarning xossalari bilan ishlash, yuqorida aytib o'tilganidek, ob'ektlarning xossalari kabi amalga oshiriladi.

Ammo elementning xususiyatiga kirish uchun avval uni olish kerak. Siz JavaScript-da DOM elementini olishingiz mumkin, masalan, universal querySelector usuli va to'plamdan foydalanib DOM elementlari, masalan, querySelectorAll orqali.

Birinchi misol sifatida quyidagi HTML elementini ko'rib chiqing:

Axborot xabari matni... var alert = document.querySelector("#alert"); // elementni oling

Unga asoslanib, biz DOM xususiyatlarini qanday olish, ularni o'zgartirish va yangilarini qo'shishni tahlil qilamiz.

DOM xususiyat qiymatlarini o'qish:

// DOM xususiyati id qiymatini oling var alertId = alert.id; // "alert" // DOM xossasining qiymatini oling className var alertClass = alert.className; // "alert alert-info" // DOM xususiyati sarlavhasining qiymatini oling var alertId = alert.title; // "Yordam matni..."

DOM xususiyat qiymatlarini o'zgartirish:

// DOM xususiyati qiymatini o'zgartirish uchun unga yangi qiymat belgilash kerak alert.title = "Yangi maslahat matni"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM xususiyatlarini qo'shish:

Alert.lang = "ru"; // lang xususiyatini "ru" ga o'rnating alert.dir = "ltr"; // dir xususiyatini "ltr" ga o'rnating

Sahifada p-elementlar mavjud bo'lgan barcha sinf qiymatlarini konsolga chiqaradigan misol:

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

Biz "ru" qiymatiga ega bo'lgan kontent sinfiga ega barcha elementlarga lang xususiyatini o'rnatgan misol:

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

Element atributlari va ular bilan ishlash usullari

Atributlar dastlab HTML kodida o'rnatiladi. Ular qaysidir ma'noda xususiyatlar bilan bog'langan bo'lsa-da, ular bir xil narsa emas. Ko'pgina hollarda, siz xususiyatlar bilan ishlashingiz va atributlarga faqat sizga kerak bo'lganda kirishingiz kerak.

Yuqorida aytib o'tilganidek, DOM xususiyatlaridan farqli o'laroq, atribut qiymatlari har doim qatordir.

JavaScript-da atributlar bilan bog'liq operatsiyalarni bajarish uchun to'rtta usul mavjud:

• .hasAttribute("attribute_name") – elementning belgilangan atributga ega ekanligini tekshiradi. Agar element tekshirilayotgan atributga ega bo'lsa, u holda bu usul rost qaytaradi, aks holda noto'g'ri.
• .getAttribute("attribute_name") – atribut qiymatini oladi. Agar element belgilangan atributga ega bo'lmasa, bu usul bo'sh satrni ("") yoki null qaytaradi.
• .setAttribute("attribute_name", "attribute_value") – elementga belgilangan qiymat bilan belgilangan atributni o'rnatadi. Agar element belgilangan atributga ega bo'lsa, bu usul shunchaki uning qiymatini o'zgartiradi.
• .removeAttribute("attribute_name") - ko'rsatilgan atributni elementdan olib tashlaydi.

Keling, misollarni ko'rib chiqaylik.

Qiymat atributiga ega juda qiziqarli misol.

Qiymat atributiga misol var name = document.querySelector("input"); // elementni oling

Keling, qiymat atributining qiymatini va DOM xususiyati qiymatini olamiz:

// elementning qiymat atributining qiymatini olish name.getAttribute("value"); // "Bob" // DOM xususiyati qiymatining qiymatini oling name.value; // "Bob" // qiymat atributining qiymatini yangilang, uni yangi qiymatga o'rnating name.setAttribute("value", "Tom"); // "Tom" // DOM xususiyati qiymatining qiymatini oling name.value; // "Tom"

Bu misol shuni ko'rsatadiki, qiymat atributi o'zgarganda, brauzer avtomatik ravishda qiymat DOM xususiyatini mos ravishda o'zgartiradi.

Endi teskarisini qilamiz, ya'ni DOM xususiyati qiymatini o'zgartiramiz va atribut qiymatining o'zgarishini tekshiramiz:

// DOM xususiyati qiymati uchun yangi qiymat o'rnating name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Ushbu misol shuni ko'rsatadiki, DOM xususiyatini o'zgartirish har doim ham atributning mos keladigan o'zgarishiga olib kelmaydi. Bular. bu holda, DOM xususiyati qiymatini o'zgartirish uning tegishli atributini o'zgartirmaydi.

Xuddi shu narsa foydalanuvchi ushbu maydonga matn kiritganda sodir bo'ladi. DOM xossasining qiymati haqiqiy qiymatni o'z ichiga oladi va mos keladigan atributda asl qiymat yoki biz, masalan, setAttribute usuli yordamida o'rnatganimiz bo'ladi.

Bu misol shuni ko'rsatadiki, har doim DOM xususiyatlari bilan ishlash to'g'riroq va siz atributga faqat zarur bo'lganda kirishingiz kerak.

HTML-da biz o'rnatgan boshlang'ich qiymatni olishingiz kerak bo'lsa ham, siz xususiyatdan foydalanishingiz mumkin. Qiymat atributining boshlang'ich qiymatini o'z ichiga olgan xususiyat defaultValue deb ataladi.

Name.defaultValue; //Tom

Yana bir juda qiziqarli misol, lekin endi href atributi bilan.

Href atributiga misol

Havola qiymatini HTMLda o'rnatilgandek olishimiz kerak bo'lgan misol.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // to'liq URL, masalan: http://localhost/page2.html

Ushbu misolda href atributi va href DOM xususiyati turli qiymatlarni o'z ichiga oladi. href atributi biz kodda o'rnatgan narsadir va DOM xususiyati to'liq URL manzilidir. Bu farq brauzerning href qiymatini to'liq URL manziliga hal qilishi kerak bo'lgan standart bilan belgilanadi.

Shuning uchun, agar biz atributdagi narsani olishimiz kerak bo'lsa, unda bu holda getAttribute usulisiz ishlay olmaymiz.

Nihoyat, tanlangan atributni ko'rib chiqaylik.

Tanlangan atribut bilan misol

Tanlangan tanlash variantining qiymatini qanday olishingiz mumkinligini ko'rsatadigan misol:

reyting yo'q 1 2 3 4 5 // tanlangan elementni oling var mark = document.querySelector("#mark"); // 1 yo'l belgisi.querySelector("variant:checked").value; // 2-usul mark.value;

Tanlangan elementda tanlangan parametr qiymatlarini qanday olishingiz mumkinligini ko'rsatadigan misol:

reyting yo'q 1 2 3 4 5 // tanlangan elementni oling var mark = document.querySelector("#mark"); // 1-usul (massiv yaratish va uni tanlangan variantlar qiymatlari bilan to'ldirish orqali) var arr = ; uchun (var i = 0, uzunlik = 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 =>variant.qiymat)

Atributlar bilan ishlashning yana bir usuli (atributlar xususiyati)

JavaScript-da har bir element atributlar xususiyatiga ega bo'lib, uning barcha atributlarini NamedNodeMap obyekti sifatida olish uchun foydalanish mumkin.

Bu usul masalan, elementning barcha atributlarini takrorlash kerak bo'lganda foydalanish mumkin.

Ushbu to'plamdagi atributga uning indeksi yoki element usuli yordamida kirish mumkin. Ushbu to'plamdagi atributlar 0 dan boshlab hisoblanadi.

Masalan, ma'lum bir elementning barcha atributlarini konsolga ko'rsatamiz:

JAVASCRIPT NI SEVAMAN

// elementni identifikator xabari bo'yicha oling var message = document.querySelector("#message"); // uning atributlarini olish var attrs = message.attributes; // tsikl (attrs.length – atributlar soni) for (var i = 0, uzunlik = attrs.length; i) yordamida barcha atributlarni ko‘rib chiqish.< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "ma'lumot"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

Bundan tashqari, siz ushbu to'plam bilan quyidagi usullardan foydalangan holda ishlashingiz mumkin:

• .getNamedItem("attribute_name") – ko'rsatilgan atributning qiymatini oladi (agar ko'rsatilgan atribut elementda mavjud bo'lmasa, natija null bo'ladi).
• .setNamedItem("attribute_tugun") – elementga yangi atribut qo'shadi yoki mavjudning qiymatini yangilaydi. Atribut yaratish uchun siz atribut nomini parametr sifatida o'tkazishingiz kerak bo'lgan document.createAttribute() usulidan foydalanishingiz kerak. Keyin yaratilgan atributga qiymat xususiyatidan foydalanib qiymat berilishi kerak.
• .removeNamedItem("attribute_name") – elementdan belgilangan atributni olib tashlaydi (natija sifatida olib tashlangan atributni qaytaradi).

getNamedItem, setNamedItem va removeNamedItem usullari orqali atributlar bilan ishlashga misol:

JAVASCRIPT NI SEVAMAN

// elementni identifikator xabari bo'yicha oling var message = document.querySelector("#message"); // uning atributlarini olish var attrs = message.attributes; // Vazifa № 1. ID atributining qiymatini oling console.log(attrs.getNamedItem("id")); // Vazifa № 2. Atributni o'rnating (agar u mavjud bo'lsa, uning qiymatini o'zgartiring, aks holda yangisini qo'shing) // style atributini yarating va uni attrStyle o'zgaruvchisiga saqlang var attrStyle = document.createAttribute("style"); // attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

Vazifalar

• Konsolga id atributiga ega bo'lgan barcha hujjat elementlarini chop eting.
• Sahifadagi barcha rasmlarga sarlavha atributini qo'shing, agar ularda bu xususiyat bo'lmasa. Atribut qiymatini alt atribut qiymatiga teng qilib o'rnating.