Nodarbībā tiks apskatīts tēmas sākums: dokumenta objekta modelis (javaScript DOM) ir dinamiskā HTML pamatā, tiks pētītas objektu piekļuves metodes un apskatītas javascript notikumu apstrādes metodes.

• Kopumā objekts ir salikts datu tips, kas apvieno daudzas vērtības kopējā vienībā un ļauj pēc pieprasījuma saglabāt un izgūt vērtības pēc to nosaukumiem.

Iepriekš mēs jau sākām iepazīties ar jēdzienu javascript.

• Javascript ir tāda lieta kā DOM - Dokumenta objekta modelis— tīmekļa lapas objekta modelis (html lapa).
• Dokumentu tagi vai, kā mēdz teikt, dokumentu mezgli ir tā objekti.

Apskatīsim diagrammu objektu hierarhija JavaScript, un kur hierarhijā atrodas šajā tēmā aplūkotais dokumenta objekts.

Skripta elementam ir šādi atribūti:

atlikt (gaida, līdz lapa tiek pilnībā ielādēta).

Piemērs:

/* Ļauj ielādēt js failus paralēli un izpildīt uzreiz pēc ielādes, negaidot, kamēr tiks apstrādāta pārējā lapas daļa */ /* Ļauj pārlūkprogrammai sākt paralēli ielādēt js failus, nepārtraucot lapas turpmāku apstrādi. To izpilde notiek pēc pilnīgas dokumenta objekta modeļa parsēšanas */

Dokumenta objekta rekvizīti un atribūti JavaScript

Dokumenta objekts apzīmē tīmekļa lapu.

Svarīgi! Lai piekļūtu objekta rekvizītiem un metodēm JavaScript, tāpat kā strādājot ar citiem objektiem, tiek izmantots punktu apzīmējums:

tie. vispirms tiek uzrakstīts pats objekts, pēc tam ar punktu un bez atstarpēm tiek norādīta tā īpašība, atribūts vai metode

objekts.īpašums objekts.atribūts objekts.metode()

Apskatīsim piemēru:

Piemērs: lai html dokumentā ir tags

Mana stihija

un specifiski viņam css stils(pat divi stili, uzdevumam noderēs otrais):

.small( krāsa : sarkana ; fonta izmērs : mazs ; ) .big( krāsa : zila ; fonta izmērs : liels; )

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

Nepieciešams:

iestatīt jaunu objekta īpašību, piešķirt tam vērtību un parādīt šo vērtību;

parāda objekta atribūta vērtību;

mainīt objekta atribūta vērtību.

Pabeigsim uzdevumu secībā:
✍ Risinājums:

Kopš šī javascript valoda, tad objektu var izgudrot un tam piešķirt jebkuru īpašību ar jebkuru vērtību. Bet vispirms iegūsim piekļuvi objektam (piekļuve objektam tiks detalizēti apspriesta vēlāk šajā nodarbībā):

// piekļūt objektam pēc tā id var elements = document.getElementById("MyElem"); elements.myProperty = 5; // piešķirt rekvizītu alert(element.myProperty); // parādīt dialoglodziņā

Nākamais uzdevums ir saistīts ar objekta atribūtu. Objekta atribūts ir taga atribūti. Tie. mūsu gadījumā tie ir divi: klases atribūts ar vērtību mazs un atribūts id. Mēs strādāsim ar klases atribūtu.

Tagad pievienosim javascript kodu, lai parādītu mūsu objekta atribūta vērtību. Kodam jābūt pēc galvenie tagi:

// piekļūt objektam pēc tā id var elements = document.getElementById("MyElem"); brīdinājums(element.getAttribute("klase")); // parādīt dialoglodziņā

Un pēdējais uzdevums: atribūta vērtības maiņa. Mums tam ir savs stils. "liels". Aizstāsim klases atribūta vērtību ar šo stilu:

// piekļūt objektam pēc tā id var elements = document.getElementById("MyElem"); element.setAttribute("klase","lielais");

Rezultātā mūsu elements kļūs lielāks un iekrāsosies zilā krāsā (liela klase).

Tagad sīkāk aplūkosim piemērā izmantotās metodes darbam ar atribūtiem.

Metodes darbam ar atribūtiem JavaScript

Atribūtus var pievienot, dzēst un modificēt. Šim nolūkam ir īpašas metodes:

• Atribūta pievienošana (jaunas vērtības iestatīšana tam):

getAttribute(attr)

• Šī atribūta klātbūtnes pārbaude:

noņemtAtribūts(atribūts)

Dažādi veidi, kā strādāt ar atribūtiem

Piemērs: izdrukājiet teksta bloka vērtības atribūta vērtību.

✍ Risinājums:

• Lai ir teksta bloks:

var elem = document.getElementById("MyElem"); var x = "vērtība";

• Apskatīsim vairākus veidus, kā iegūt atribūta vērtību (izvadei izmantojiet metodi alert()):

elem.getAttribute("vērtība")

elem.getAttribute("vērtība")

2. punktu apzīmējums:

elem.attributes.value

elem.attributes.value

3. iekavu apzīmējums:

var elements = document.getElementById("t1"); brīdinājums(...) elements.setAttribute(...);


Varat arī iestatīt atribūtu vērtības vairākos veidos:

var x = "atslēga"; // atslēga - atribūta nosaukums, val - atribūta vērtība // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Ķermeņa elementu īpašības

Izmantojot dokumenta objektu, varat piekļūt dokumenta pamattekstam - body tag - ar dažām noderīgām īpašībām.

Piemēram, body tagam ir divi rekvizīti: klienta loga platums un augstums:

document.body.clientHeight — klienta loga augstums
document.body.clientWidth — klienta loga platums


Bet vissvarīgākais, kā mēs jau uzzinājām, ir tas, ka caur dokumenta objektu, izmantojot īpašas metodes, tiek nodrošināta piekļuve visiem lapas elementiem, tas ir, tagiem.

Svarīgi! Piekļūstot lapas tagiem šādā veidā, skriptam ir jāatrodas elementu koka beigās pirms body aizvēršanas! Tā kā brīdī, kad skripts tiek izpildīts, pārlūkprogrammai ekrānā jau jābūt “uzzīmētiem” visiem elementiem

Darbs js8_1 . Rādīt ziņojumu par pārlūkprogrammas loga lielumu: piemēram, "pārlūka loga izmēri 600 x 400"

Piekļuve dokumenta elementiem JavaScript

Ir vairākas iespējas, kā piekļūt objektiem vai tos meklēt:

Meklēšana pēc id (vai metode getElementById) atgriež noteiktu elementu

Meklēt pēc taga nosaukuma (vai metodes getElementsByTagName), atgriež elementu masīvu

Meklēt pēc nosaukuma atribūta (vai metodes getElementsByName), atgriež elementu masīvu

Izmantojot vecāku elementus (visu bērnu iegūšana)

Apsvērsim katru no iespējām sīkāk.

Piekļuve elementam, izmantojot tā id atribūtu

Sintakse: document.getElementById(id)

Metode getElementById() atgriež pašu elementu, ko pēc tam var izmantot, lai piekļūtu datiem

Piemērs: lapā ir teksta lauks ar atribūtu id="cake":

...

Nepieciešams

✍ Risinājums:

alert(document.getElementById("kūka").value); // atgriež "kūku skaits"

To pašu var izdarīt, piekļūstot objektam, izmantojot mainīgo:

var a=document.getElementById("kūka"); brīdinājums(a.vērtība); // parādīt vērtības atribūta vērtību, t.i. teksts "kūku skaits"

Svarīgi: skriptam jāatrodas aiz taga!

Piekļuve elementu masīvam, izmantojot vārda atzīmi un masīva indeksu

Sintakse:
document.getElementsByTagName(nosaukums);

Piemērs: lapā ir teksta lauks (ievades tags) ar vērtības atribūtu:

...

Nepieciešams: parādīt tā vērtības atribūta vērtību

Metode getElementsByTagName nodrošina piekļuvi, izmantojot mainīgo, visiem ievades elementiem (t.i., ievades elementu masīvam), pat ja šis elements ir vienīgais lapā. Lai piekļūtu konkrētam elementam, piemēram, pirmajam, mēs norādām tā indeksu (masīvs sākas ar nulles indeksu).

✍ Risinājums:

Mēs piekļūstam noteiktam elementam pēc indeksa:

var a =document.getElementsByTagName("ievade"); brīdinājums(a.vērtība); // atgriež "kūku skaits"

Piekļuve elementu masīvam pēc nosaukuma atribūta vērtības

Sintakse:
document.getElementsByName(nosaukums);

Metode getElementsByName("...") atgriež objektu masīvu, kuru nosaukuma atribūts ir vienāds ar vērtību, kas norādīta kā metodes parametrs. Ja lapā ir tikai viens šāds elements, metode joprojām atgriež masīvu (tikai ar vienu elementu).

Piemērs: pieņemsim, ka dokumentā ir elements:

var elements = document.getElementsByName("Mans elements"); brīdinājums(elements.vērtība);

IN šajā piemērā ir tikai viens elements, bet tiek nodrošināta piekļuve masīva nulles elementam.

Svarīgs: Metode darbojas tikai ar tiem elementiem, kuriem specifikācijā ir skaidri norādīts nosaukuma atribūts: tie ir forma , ievade , a , select , textarea un vairāki citi, retāk sastopami tagi.

Metode document.getElementsByName nedarbosies ar citiem elementiem, piemēram, div , p u.c.

Piekļuve vecāka elementa pēcnācējiem

Bērniem var piekļūt, izmantojot JavaScript, izmantojot rekvizītu childNodes. Īpašums pieder vecākajam objektam.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Apskatīsim piemēru, kur attēlu atzīmes tiek ievietotas konteinerā, ko sauc par div tagu. Tādējādi tags div ir attēla datu vecāks, un paši img tagi attiecīgi ir div taga atvasinājumi:

Tagad izlaidīsim uz modālais logs masīva elementu vērtības ar pēcnācējiem, t.i. img tagi:

var myDiv=document.getElementById("div_for_img"); // piekļūt vecākajam konteineram var childMas=myDiv.childNodes; // pēcteču masīvs (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Ņemiet vērā, ka ir ērti izmantot cilpu, lai atkārtotu pēcnācēju masīva elementus. Tie. mūsu piemērā mēs iegūstam ciklu:

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

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

Citi veidi, kā piekļūt elementiem

Apskatīsim citas metodes, izmantojot piemēru:

1 3 4

1 3 4

Piekļuve:

... // nevēlami un novecojuši elementu piekļuvēji: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 brīdinājums(document.f .b .type ) ; // pogas brīdinājums(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ); // o2 // vēlamās metodes piekļuvei elementiem alert(document.getElementById ("t" ) .type ) ; // teksta brīdinājums(document.getElementById ("s" ) .name ) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4 ...

... // nevēlamas un novecojušas elementu piekļuves metodes: alert(document.forms.name); // f alert(document.forms.elements.type); // teksta brīdinājums(document.forms.elements.options.id); // o2 brīdinājums(document.f.b.type); // pogas brīdinājums(document.f.s.name); // ss brīdinājums(document.f.s.options.id); // o2 // vēlamās metodes, lai piekļūtu elementiem alert(document.getElementById("t").type); // teksta brīdinājums(document.getElementById("s").nosaukums); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Piemērs: HTML dokumentā izveidojiet pogu un teksta lauku. Izmantojot skriptu, iekrāsojiet pogas fonu (pogas rekvizīts style.backgroundColor) un parādiet uzrakstu "Sveiki!" teksta laukā (vērtības atribūts).

HTML kods:

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

2. iespēja:

document.getElementById ("t1" ) .setAttribute ( "vērtība" , "Sveiki!" ) ; document.getElementById("b1" ) .style .backgroundColor = "sarkans" ;

document.getElementById("t1").setAttribute("value","Sveiks!"); document.getElementById("b1").style.backgroundColor = "sarkans";

Uzdevums Js8_2. Izveidojiet teksta lauku tagus, kā parādīts attēlā. Piešķiriet viņiem atbilstošās (attēlā redzamās) id atribūtu vērtības. Izmantojot skriptu, pievienojiet vērtību “0” visiem ciparu laukiem (pieņemot skaitliskās vērtības)

Pārbauda, ​​vai veidlapas dati ir ievadīti pareizi

Vai lauks ir atstāts tukšs?

Lietotāja ievadei nevar uzticēties. Nav saprātīgi pieņemt, ka lietotāji, ievadot datus, pārbaudīs datus. Tas nozīmē, ka šim nolūkam ir jāizmanto JavaScript.

Lai pārbaudītu, vai teksta lauks nav atstāts tukšs (piemēram, pēc tam, kad lietotājs ir aizpildījis kādas veidlapas datus), jāatsaucas uz rekvizītu value. Ja īpašuma vērtība ir tukša rinda(""), kas nozīmē, ka par to ir kaut kādā veidā jāpaziņo lietotājam.

if(document.getElementById("nosaukums").value=="") (dažas darbības, piemēram, tiek parādīts ziņojums ar lūgumu aizpildīt lauku);

Turklāt jūs varat iztikt bez skripta. Pie ievades taga teksta lauks ir modeļa atribūts. ir norādīta tā vērtība regulāra izteiksme lai apstiprinātu datus noteiktā veidlapas teksta laukā. Ja ir atribūts modelis, tad veidlapa netiks iesniegta, kamēr šis teksta lauks nebūs pareizi aizpildīts.
Piemēram, lai pārbaudītu, vai lauks ir atstāts tukšs:

Teksta vietā skaitliskā vērtība: funkcija isNaN

Ja laukā ir jāievada skaitliska vērtība, bet tā vietā lietotājs ievada tekstu, tad ir jāizmanto funkcija isNaN. "Vai nav cipars?"), kas pārbauda ievades datu veidu un atgriež patieso vērtību, ja ciparu datu vietā tiek ievadīti teksta dati.

Tas. ja tiek atgriezts true, tad lietotājam ir jābrīdina, lai ievadītu pareizo formātu, t.i. numuru.

if(isNaN(document.getElementById("minūtes").value))( brīdinājums, kurā jāievada skaitliski dati);

Dota lapa ar aizpildāmiem elementiem:


Fragments html kods:

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

Vārds: Donuts skaits: Minūtes: Kopsavilkums: Nodoklis: Rezultāts: ...

Vārds:
Donuts skaits:
Minūtes:
Kopsavilkums:
Nodoklis:
Rezultāts:
...

Nepieciešams:
Aizpildiet tukšās vietas tālāk esošajā koda fragmentā, kas pārbauda, ​​vai divi teksta lauki ir aizpildīti pareizi: Vārds(id = "nosaukums") un minūtes(id="minūtes"). Izmantojiet pārbaudes, lai nodrošinātu, ka lauks ir atstāts tukšs ("") un ciparu lauks ir aizpildīts pareizi (isNaN).

* Veiciet uzdevumu arī ar teksta lauku atribūtu pattern, izmantojot .

Skripta fragments:

Kods izmanto iepriekš apgūtos nosacījumus, lai izveidotu sarežģītus nosacījumus.

Jauna koncepcija ir funkcijas izsaukšana kā pogu notikumu apstrādātājs:
onclick="placeOrder();"
Noklikšķinot uz pogas, tiks izsaukta funkcija placeOrder().

Varat izveidot pielāgotu iesiešanas iesiešana, kas pārbaudīs konkrēta novērojamā Būla vērtību pirms atribūtu pievienošanas vai nepievienošanas. Skatiet šo piemēru:

Ko.bindingHandlers.attrIf = ( atjauninājums: funkcija (elements, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (rādīt) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); saite

Es vēlos, lai es varētu vienkārši atbildēt @gbs, bet es nevaru. Mans risinājums būtu divi vienādi HTML elements: viens ar atribūtu, bez tā un izslēgšanas nosacījums, lai pievienotu vienu no tiem atbilstoši elementam. Es arī apzinos šīs izplatītās cerības, bet kurš risinājums ir efektīvāks?

Šī apmācība ir par elementu atribūtu lasīšanu un maiņu programmā jQuery.

Atribūti ir nosaukuma/vērtības pāris, kas tiek piešķirti taga elementiem. Atribūtu piemēri ( href, virsraksts, src, klasē):

Šeit ir kopsavilkuma teksts

• attr(), lai lasītu, pievienotu un mainītu atribūtus
• RemoveAttr(), lai noņemtu atribūtus

Šī nodarbība aptver darbu ar attr() un removeAttr() metodēm.

Ir īpašas jQuery metodes darbam ar CSS klasēm, kuras ir aprakstītas citā nodarbībā. Strādājot pie projekta jQuery, jums ir daudz jāmanipulē ar CSS klasēm, un klases atribūts var saturēt vairākus klašu nosaukumus, kas padara darbu ar to daudz sarežģītāku nekā ar citiem atribūtiem.

Ja plānojat strādāt ar ievades lauku vērtībām, tad labāk ir izmantot metodi val(), kas ne tikai nodrošina vienkāršotu veidu darbam ar vērtības atribūtu, bet arī var nolasīt un iestatīt vērtības. atlases saraksta atlasītajos elementos.

Atribūta vērtības nolasīšana

Elementa atribūta vērtības nolasīšana ir vienkārša. Jums tikai jāizsauc metode attr() jQuery objektā, kurā ir elements, nododot tam lasāmā atribūta nosaukumu. Metode atgriež atribūta vērtību:

// Izdrukājiet #myLink elementa brīdinājuma atribūta "href" vērtību ($("a#myLink").attr("href"));

Ja jūsu jQuery objektā ir vairāki elementi, metode attr() nolasa atribūtu vērtības tikai pirmajam kopas elementam.

Atribūtu vērtību iestatīšana

Metodi attr() var izmantot arī, lai pievienotu vai mainītu atribūtu vērtības:

• Ja atribūts neeksistē elementā tā būs pievienots un tam tiks piešķirta norādītā vērtība.
• Ja atribūts jau eksistē, tā vērtība būs atjaunināts dotā vērtība.

Ir trīs veidi, kā izmantot attr() metodi, lai pievienotu vai mainītu atribūtus:

Varat pievienot/mainīt atribūtus jebkuram elementam (vai elementu kopai).

Elementam (vai elementiem) varat pievienot/mainīt vairākus atribūtus vienlaikus, norādot atribūtu nosaukumu un vērtību karti.

varat dinamiski pievienot/mainīt vienu atribūtu vairākiem elementiem, izmantojot atzvanīšanas funkciju.

Iestatiet vienu atribūtu

Lai iestatītu vai mainītu elementa atribūtu, ir jāizsauc metode attr(), norādot atribūta nosaukumu un vērtību. Piemēram:

// Mainiet #myLink elementa atribūta "href" vērtību uz vērtību "http://www.example.com/" // (ja atribūts "href" neeksistē, tas tiks izveidots automātiski) $("a#myLink"). attr("href", "http://www.example.com/");

Ir iespējams arī iestatīt vienu un to pašu atribūtu vairākiem elementiem:

Vairāku atribūtu iestatīšana, izmantojot karti

Izmantojot karti, vienam vai vairākiem elementiem varat iestatīt vairākus atribūtus vienlaikus. Šis ir vārdu/vērtību pāru saraksts, kas izskatās šādi:

( nosaukums1: vērtība1, nosaukums2: vērtība2, ... )

Šajā piemērā elementā img vienlaikus ir iestatīti divi atribūti:

// Iestatiet atribūtus "src" un "alt" img elementam #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Mans fotoattēls" )) ;

Varat arī iestatīt atribūtus vairākiem elementiem:

// Iestatiet atribūtus "src" un "alt" visiem img elementiem $("img").attr(( "src": "mypic.jpg", "alt": "Mans fotoattēls" ));

Atribūtu iestatīšana, izmantojot atzvanīšanas funkciju

Tā vietā, lai atribūtu vērtības nodotu metodei attr(), varat nodot atzvanīšanas funkcijas nosaukumu. Tādā veidā jūs varat dinamiski iestatīt atribūtu vērtības vairākiem elementiem, pamatojoties uz elementa pozīciju, esošu atribūta vērtību vai citām īpašībām.

Atgriešanas funkcijai ir jāizmanto divi argumenti:

• Pašlaik atlasītā elementa pozīcijas indekss kopā (sākas ar nulli)
• vecā atribūta vērtība pašlaik atlasītajam elementam

Funkcijas atgrieztā vērtība tiek izmantota, lai aizstātu atribūta vērtību.

Papildus elementa pašreizējai pozīcijai un atribūta vecajai vērtībai jūsu funkcija var piekļūt pašam elementam, izmantojot taustiņu vārdi šis. Tādā veidā no atzvanīšanas funkcijas varat piekļūt jebkuram elementa īpašumam vai metodei.

Piemērā tiek izmantota atzvanīšanas funkcija, lai pievienotu alt atribūtu katram attēlam lapā, pamatojoties uz attēla pozīciju un tā atribūtu src:

$(init); function init() ( // Iestatiet "alt" atribūtu visiem "img" elementiem $("img").attr("alt", setAltText); funkcija setAltText(index, atribūtiValue) (Return ("Attēls " + (indekss +1) + ":" + this.src); ) )

Pēc koda palaišanas pirmajam attēlam būs alt atribūts ar vērtību "1. attēls: mans fotoattēls.jpg", bet otrajam attēlam būs alt atribūts ar vērtību "2. attēls: jūsu fotoattēls.jpg" .

Atribūta noņemšana

Lai noņemtu atribūtu no elementa, jums ir jāizsauc metode removeAttr(), nododot tai noņemamā atribūta nosaukumu. Piemēram:

// Noņemiet atribūtu "title" no #myLink elementa $("a#myLink").removeAttr("title");

Varat arī izsaukt metodi removeAttr() jQuery objektā, kurā ir vairāki elementi. Metode removeAttr() noņems norādīto atribūtu no visiem elementiem:

// Noņemiet atribūtu "title" no visām saitēm $("a").removeAttr("title");

Kopsavilkums

Šajā nodarbībā tika apskatīti jautājumi par darbu ar elementu atribūtiem programmā jQuery:

• Atribūtu vērtību lasīšana
• Viena atribūta iestatīšana
• Vairāku dažādu atribūtu iestatīšana vienlaikus
• Atzvanīšanas funkcijas izmantošana, lai dinamiski iestatītu atribūtu vērtības elementu kopai
• Atribūtu noņemšana no elementa

Iestata norādītā elementa atribūta vērtību. Ja atribūts jau pastāv, vērtība tiek atjaunināta; pretējā gadījumā tiek pievienots jauns atribūts ar norādīto nosaukumu un vērtību.

Sintakse Elements.setAttribute( nosaukums, vērtību); Parametru nosaukums DOMString, kas norāda atribūta nosaukumu, kura vērtība ir jāiestata. Atribūta nosaukums tiek automātiski pārveidots par visiem mazajiem burtiem, kad setAttribute() tiek izsaukts HTML elementā HTML dokumentā. vērtība DOMString, kas satur atribūtam piešķiramo vērtību. Jebkura norādītā vērtība, kas nav virkne, tiek automātiski pārveidota par virkni.

Būla atribūti tiek uzskatīti par patiesiem, ja tie vispār ir elementā neatkarīgi no to faktiskās vērtības; parasti vērtībā ir jānorāda tukša virkne ("") (daži cilvēki izmanto atribūta nosaukumu; tas darbojas, bet ir nestandarta). Skatiet tālāk sniegto praktisko demonstrāciju.

Tā kā norādītā vērtība tiek pārveidota par virkni, nulles norādīšana ne vienmēr nodrošina to, ko jūs gaidāt. Tā vietā, lai noņemtu atribūtu vai iestatītu tā vērtību uz nulli , tā iestata atribūta vērtību uz virkni "null" . Ja vēlaties noņemt atribūtu, izsauciet removeAttribute() .

Atgriešanas vērtība Izņēmumi InvalidCharacterError Norādītajā atribūta nosaukumā ir viena vai vairākas rakstzīmes, kas nav derīgas atribūtu nosaukumos. Piemērs

Nākamajā piemērā setAttribute() tiek izmantots, lai iestatītu atribūtus uz .

HTML Hello World JavaScript var b = document.querySelector("poga"); b.setAttribute("nosaukums", "helloButton"); b.setAttribute("atspējots", "");

Tas parāda divas lietas:

• Pirmajā setAttribute() izsaukumā iepriekš tiek parādīta nosaukuma atribūta vērtības maiņa uz "helloButton". To var redzēt, izmantojot pārlūkprogrammas lapas inspektoru (Chrome, Edge, Firefox, Safari).
• Lai iestatītu Būla atribūta vērtību, piemēram, atspējots , varat norādīt jebkuru vērtību. Ieteicamās vērtības ir tukša virkne vai atribūta nosaukums. Svarīgi ir tikai tas, ka, ja atribūts vispār pastāv, neatkarīgi no tā faktiskās vērtības, tā vērtība tiek uzskatīta par patiesu. Atribūta trūkums nozīmē, ka tā vērtība ir nepatiesa. Iestatot atspējotā atribūta vērtību uz tukšu virkni (""), mēs iestatām atspējots uz true , kā rezultātā poga tiek atspējota.

DOM metodes, kas nodarbojas ar elementa atribūtiem:

Neatbilst nosaukumvietai, visbiežāk izmantotās metodes Nosaukumvietas zinoši varianti (DOM 2. līmenis) DOM 1. līmeņa metodes tiešai darbībai ar Attr mezgliem (reti izmantotas) DOM 2. līmeņa nosaukumvietas metodes tiešai darbībai ar Attr mezgliem (izmanto reti)

setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM2)	hasAttributeNS	-	-
noņemt atribūtu (DOM 1)	RemoveAttributeNS	RemoveAttributeNode	-

Specifikācija

• DOM 2. līmeņa kodols: setAttribute (ieviests DOM 1. līmeņa kodolā)

Pārlūkprogrammu saderība

Saderības tabula šajā lapā ir ģenerēta no strukturētiem datiem. Ja vēlaties sniegt ieguldījumu datu apkopošanā, lūdzu, skatiet vietni https://github.com/mdn/browser-compat-data un nosūtiet mums izvilkšanas pieprasījumu.

Atjauniniet saderības datus vietnē GitHub

Mobilais galddators Chrome Edge Firefox Internet Explorer Opera Safari Android tīmekļa skats Chrome Android ierīcēm Firefox Android ierīcēm Opera Android ierīcēm Safari operētājsistēmā iOS Samsung InternetsetAttribute

Chrome Pilns atbalsts Jā	Edge Pilns atbalsts 12	Firefox Pilns atbalsts Jā	IE Pilns atbalsts 5 Piezīmes Pilns atbalsts 5 Piezīmes Piezīmes Programmā Internet Explorer 7 un vecākās versijās setAttribute neiestata stilus un noņem notikumus, kad mēģināt tos iestatīt.	Opera Pilns atbalsts Jā	Safari pilnīgs atbalsts 6	WebView Android Pilns atbalsts Jā	Chrome Android Pilns atbalsts Jā	Firefox Android Pilns atbalsts Jā	Opera Android Pilns atbalsts Jā	Safari iOS Pilns atbalsts Jā	Samsung Internet Android Pilns atbalsts Jā

Apzīmējumi Pilns atbalsts Pilns atbalsts Skatiet ieviešanas piezīmes. Skatiet ieviešanas piezīmes. Gekons atzīmē

Izmantojot setAttribute(), lai modificētu noteiktus atribūtus, jo īpaši vērtību XUL, tas darbojas nekonsekventi, jo atribūts norāda noklusējuma vērtību. Lai piekļūtu vai mainītu pašreizējās vērtības, izmantojiet rekvizītus. Piemēram, izmantojiet Element.value, nevis Element.setAttribute() .

Šajā rakstā mēs iepazīsimies ar DOM īpašībām un atribūtiem, apsvērsim, kā tie atšķiras un kā ar tiem pareizi strādāt. Apskatīsim, kādas metodes JavaScript ir, lai veiktu darbības ar atribūtiem.

Kāda ir atšķirība starp atribūtu un DOM rekvizītu?

Atribūti ir HTML entītijas, ar kurām mēs varam pievienot noteiktus datus HTML koda elementiem.

Kad pārlūkprogramma pieprasa lapu, tā saņem tās HTML avota kodu. Pēc tam tas parsē šo kodu un, pamatojoties uz to, izveido DOM. Šī procesa laikā elementu HTML atribūti tiek tulkoti atbilstošos DOM rekvizītos.

Piemēram, pārlūkprogramma, lasot šādu HTML koda rindiņu, šim elementam izveidos šādus DOM rekvizītus: id , className , src un alt .

Šiem rekvizītiem var piekļūt JavaScript kodā kā objekta rekvizīti. Objekts šeit ir DOM mezgls (elements).

Piemērs, kurā mēs iegūstam DOM rekvizītu vērtības iepriekš norādītajam elementam un izvadām to vērtības uz konsoli:

// iegūt elementu var brandImg = document.querySelector("#brand"); // parāda elementa DOM rekvizītu vērtības konsolē console.log(brandImg.id); // "zīmols" console.log(brandImg.className); // "zīmols" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "vietnes logotips"

Daži DOM rekvizītu nosaukumi neatbilst atribūtu nosaukumiem. Viens no tiem ir klases atribūts. Šis atribūts atbilst DOM rekvizītam className. Šī atšķirība ir saistīta ar to, ka klase ir atslēgvārds JavaScript, tas ir rezervēts un to nevar izmantot. Šī iemesla dēļ standarta izstrādātāji nolēma atbilstības nodrošināšanai izmantot kādu citu nosaukumu, kas tika izvēlēts kā className .

Vēl viena nianse ir saistīta ar to, ka HTML atribūtu tulkojums, kas norādīts avota kods dokumentu, DOM rekvizīti ne vienmēr tiek ieviesti viens pret vienu.

Ja elementam ir nestandarta HTML atribūts, tad tam atbilstošais rekvizīts DOM netiek izveidots.

// iegūt elementu mydiv = document.querySelector("#mydiv"); // iegūstiet elementa alt rekvizīta vērtību un izvadiet to konsolē console.log(mydiv.alt); // undefined // iegūstiet elementa alt atribūta vērtību un izvadiet to konsolē console.log(mydiv.getAttribute("alt")); // "..."

Vēl viena atšķirība ir tā, ka noteiktu HTML atribūtu un to atbilstošo DOM rekvizītu vērtības var atšķirties. Tie. atribūtam var būt viena vērtība, un DOM rekvizītam, kas izveidots, pamatojoties uz to, var būt cita vērtība.

Viens no šiem atribūtiem ir atzīmēts.

Pārbaudītā HTML atribūta vērtība šajā gadījumā ir tukša virkne. Taču īpašums, kas atbilst noteiktajam atribūtam DOM, būs taisnība. Jo saskaņā ar standarta noteikumiem, lai iestatītu patiesu, pietiek tikai pieminēt šo atribūtu HTML kodā, un nav svarīgi, kāda tā vērtība būs.

Turklāt, pat ja ievades elementam ar tipa izvēles rūtiņu HTML kodā nenorādīsim pārbaudīto atribūtu, tam DOM joprojām tiks izveidots pārbaudīts rekvizīts, taču tas būs vienāds ar false.

Turklāt JavaScript ļauj strādāt arī ar atribūtiem. Tam ir īpašas metodes DOM API. Bet ieteicams tos izmantot tikai tad, ja jums patiešām ir nepieciešams šādi strādāt ar datiem.

Tajā pašā laikā jums jāzina, ka, mainot elementa DOM īpašību, mainās arī atbilstošais atribūts un otrādi. Bet šis process pārlūkprogrammās ne vienmēr tiek veikts viens pret vienu.

Galvenās atšķirības starp DOM rekvizītiem un atribūtiem ir:

• atribūta vērtība vienmēr ir virkne, un DOM rekvizīta vērtība ir noteikts datu tips (nav obligāti virkne);
• Atribūta nosaukums nav reģistrjutīgs, un DOM rekvizīti ir reģistrjutīgi. Tie. HTML kodā mēs varam, piemēram, rakstīt HTML id atribūtu kā Id , ID utt. Tas pats attiecas uz atribūta nosaukumu, ko mēs norādām īpašās JavaScript metodēs darbam ar to. Bet mēs varam piekļūt atbilstošajam DOM rekvizītam tikai ar id un neko citu.

Darbs ar elementa DOM īpašībām

Darbs ar JavaScript elementu īpašībām, kā minēts iepriekš, tiek veikts tāpat kā ar objektu īpašībām.

Bet, lai piekļūtu elementa īpašībai, tas vispirms ir jāiegūst. Varat iegūt DOM elementu JavaScript, piemēram, izmantojot universālo querySelector metodi un kolekciju DOM elementi, piemēram, izmantojot querySelectorAll .

Kā pirmo piemēru apsveriet šādu HTML elementu:

Informācijas ziņojuma teksts... var alert = document.querySelector("#alert"); // iegūt elementu

Pamatojoties uz to, mēs analizēsim, kā iegūt DOM rekvizītus, mainīt tos un pievienot jaunus.

DOM rekvizītu vērtību lasīšana:

// iegūt DOM rekvizīta id vērtību var alertId = alert.id; // "alert" // iegūt DOM rekvizīta vērtību className var alertClass = alert.className; // "alert alert-info" // iegūt DOM rekvizīta nosaukuma vērtību var alertId = alert.title; // "Palīdzības teksts..."

DOM rekvizītu vērtību maiņa:

// lai mainītu DOM rekvizīta vērtību, tam vienkārši jāpiešķir jauna vērtība alert.title = "Jauns rīka padoma teksts"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM rekvizītu pievienošana:

Alert.lang = "ru"; // iestatiet lang rekvizītu uz "ru" alert.dir = "ltr"; // iestatiet dir rekvizītu uz "ltr"

Piemērs, kurā mēs izvadīsim konsolei visas klases vērtības, kas lapā ir p elementiem:

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

Piemērs, kurā mēs iestatām lang rekvizītu visiem elementiem ar satura klasi ar vērtību “ru”:

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

Elementu atribūti un metodes darbam ar tiem

Atribūti sākotnēji tiek iestatīti HTML kodā. Lai gan tie kaut kādā veidā ir saistīti ar īpašībām, tie nav viens un tas pats. Vairumā gadījumu jums vajadzētu strādāt ar rekvizītiem un piekļūt atribūtiem tikai tad, kad tas patiešām ir nepieciešams.

Atribūtu vērtības atšķirībā no DOM rekvizītiem, kā minēts iepriekš, vienmēr ir virkne.

JavaScript ir četras metodes, lai veiktu darbības, kas saistītas ar atribūtiem:

• .hasAttribute("attribute_name") – pārbauda, ​​vai elementam ir norādītais atribūts. Ja elementam ir pārbaudāmais atribūts, tad šī metode atgriež patiesu, pretējā gadījumā nepatiesu.
• .getAttribute("attribute_name") — iegūst atribūta vērtību. Ja elementam nav norādītā atribūta, šī metode atgriež tukšu virkni ("") vai nulli .
• .setAttribute("atribūta_nosaukums", "atribūta_vērtība") – iestata elementam norādīto atribūtu ar norādīto vērtību. Ja elementam ir norādīts atribūts, šī metode vienkārši mainīs tā vērtību.
• .removeAttribute("atribūta_nosaukums") - noņem norādīto atribūtu no elementa.

Apskatīsim piemērus.

Ļoti interesants piemērs ar vērtības atribūtu.

Piemērs ar vērtības atribūtu var name = document.querySelector("input"); // iegūt elementu

Iegūsim vērtības atribūta vērtību un DOM rekvizīta vērtību:

// iegūt elementa name atribūta value vērtību.getAttribute("value"); // "Bob" // iegūt DOM rekvizīta vērtības vērtību name.value; // "Bob" // atjaunina value atribūta vērtību, iestata to uz jaunu vērtību name.setAttribute("value", "Tom"); // "Toms" // iegūt DOM rekvizīta vērtību vērtības name.value; // "Toms"

Šis piemērs parāda, ka, mainoties vērtības atribūtam, pārlūkprogramma automātiski attiecīgi maina vērtības DOM rekvizītu.

Tagad darīsim pretējo, proti, mainīsim DOM rekvizīta vērtību un pārbaudīsim, vai mainās atribūta vērtība:

// iestatiet jaunu vērtību DOM rekvizīta vērtībai name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Šis piemērs parāda, ka, mainot DOM rekvizītu, ne vienmēr tiek veiktas atbilstošas ​​izmaiņas atribūtā. Tie. šajā gadījumā, mainot DOM rekvizīta vērtību, netiek mainīts tā atbilstošais atribūts.

Tas pats notiks, kad lietotājs ievadīs tekstu šajā laukā. DOM rekvizīta vērtība ietvers faktisko vērtību, un atbilstošais atribūts ietvers sākotnējo vērtību vai to, ko mēs iestatījām, piemēram, izmantojot setAttribute metodi.

Šis piemērs parāda, ka pareizāk ir vienmēr strādāt ar DOM rekvizītiem, un jums ir jāpiekļūst atribūtam tikai tad, kad tas patiešām ir nepieciešams.

Pat gadījumā, ja jums ir jāiegūst sākotnējā vērtība, ko iestatām HTML, varat izmantot īpašumu. Rekvizītu, kas satur vērtības atribūta sākotnējo vērtību, sauc par defaultValue .

Name.defaultValue; //Toms

Vēl viens ļoti interesants piemērs, bet tagad ar href atribūtu.

Piemērs ar href atribūtu

Piemērs, kurā mums jāiegūst saites vērtība, kāda tā tika iestatīta HTML.

var page2 = document.querySelector("#saite"); page2.getAttribute("href"); // lapa2.html lapa2.href; // pilns URL, piemēram: http://localhost/page2.html

Šajā piemērā atribūts href un rekvizīts href DOM satur dažādas vērtības. Atribūts href ir tas, ko mēs iestatām kodā, un DOM rekvizīts ir pilns URL. Šo atšķirību nosaka standarts, ka pārlūkprogrammai ir jāatrisina href vērtība uz pilnu URL.

Tāpēc, ja mums ir jāiegūst tas, kas ir atribūtā, tad šajā gadījumā nevar iztikt bez getAttribute metodes.

Visbeidzot, apskatīsim izvēlēto atribūtu.

Piemērs ar atlasīto atribūtu

Piemērs, kas parāda, kā varat iegūt atlasītās atlases opcijas vērtību:

nav vērtējuma 1 2 3 4 5 // iegūt atlases elementu var mark = document.querySelector("#mark"); // 1 virziena mark.querySelector("option:checked").value; // 2. metode mark.value;

Piemērs, kas parāda, kā atlasītajā elementā var iegūt atlasīto opciju vērtības:

nav vērtējuma 1 2 3 4 5 // iegūt atlases elementu var mark = document.querySelector("#mark"); // 1. metode (izveidojot masīvu un aizpildot to ar atlasīto opciju vērtībām) var arr = ; for (var i = 0, garums = 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 =>opcija.vērtība)

Vēl viens veids, kā strādāt ar atribūtiem (atribūtu īpašums)

JavaScript katram elementam ir atribūtu rekvizīts, ko var izmantot, lai izgūtu visus tā atribūtus kā NamedNodeMap objektu.

Šī metode var izmantot, ja nepieciešams, piemēram, atkārtot visus elementa atribūtus.

Atribūtam šajā kolekcijā var piekļūt, izmantojot tā indeksu vai vienuma metodi. Atribūti šajā kolekcijā tiek skaitīti no 0.

Piemēram, parādīsim visus noteikta elementa atribūtus konsolei:

MAN MĪLU JAVASCRIPT

// iegūt elementu pēc tā identifikatora ziņojuma var message = document.querySelector("#message"); // iegūt tā atribūtus var attrs = message.attributes; // iziet cauri visiem atribūtiem, izmantojot cilpu (attrs.length — atribūtu skaits) priekš (var i = 0, garums = attrs.length; i< 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 = "info"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

Turklāt jūs varat arī strādāt ar šo kolekciju, izmantojot šādas metodes:

• .getNamedItem("attribute_name") – iegūst norādītā atribūta vērtību (ja norādītā atribūta elementā nav, rezultāts būs nulle).
• .setNamedItem("attribute_node") — pievieno elementam jaunu atribūtu vai atjaunina esošā atribūta vērtību. Lai izveidotu atribūtu, jāizmanto metode document.createAttribute(), kurai kā parametrs ir jānodod atribūta nosaukums. Pēc tam izveidotajam atribūtam ir jāpiešķir vērtība, izmantojot vērtību rekvizītu.
• .removeNamedItem("atribūta_nosaukums") — noņem norādīto atribūtu no elementa (atgriež noņemto atribūtu kā rezultātu).

Piemērs darbam ar atribūtiem, izmantojot metodes getNamedItem, setNamedItem un removeNamedItem:

MAN MĪLU JAVASCRIPT

// iegūt elementu pēc tā identifikatora ziņojuma var message = document.querySelector("#message"); // iegūt tā atribūtus var attrs = message.attributes; // Uzdevums Nr.1. Iegūstiet id atribūta vērtību console.log(attrs.getNamedItem("id")); // Uzdevums Nr.2. Iestatiet atribūtu (ja tāds pastāv, tad mainiet tā vērtību, pretējā gadījumā pievienojiet jaunu) // izveidojiet stila atribūtu un saglabājiet to mainīgajā attrStyle var attrStyle = document.createAttribute("style"); // piešķirt atribūtam vērtību, izmantojot vērtības rekvizītu attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

Uzdevumi

• Izdrukājiet konsolē visus dokumenta elementus, kuriem ir id atribūts.
• Pievienojiet nosaukuma atribūtu visiem lapas attēliem, ja tiem nav šī atribūta. Iestatiet atribūta vērtību vienādu ar alt atribūta vērtību.