Lekcija će pokriti početak teme: objektni model dokumenta (javaScript DOM) je osnova dinamičkog HTML-a, proučavat će se metode pristupa objektima i razmatrati metode obrade javascript događaja.

• Općenito, objekt je kompozitni tip podataka koji kombinira mnoge vrijednosti u zajedničku jedinicu i omogućava da se vrijednosti pohrane i dohvate prema njihovim imenima na zahtjev.

Ranije smo već počeli da se upoznajemo sa konceptom u javascriptu.

• U javascriptu postoji nešto kao DOM - Model objekta dokumenta— objektni model web stranice (html stranica).
• Oznake dokumenta ili, kako još kažu, čvorovi dokumenta su njegovi objekti.

Pogledajmo dijagram hijerarhija objekata u JavaScript-u, i gdje se u hijerarhiji nalazi objekt dokumenta o kojem se govori u ovoj temi.

Element skripte ima sljedeće atribute:

odgodi (čeka se da se stranica potpuno učita).

primjer:

/* Omogućava paralelno učitavanje js datoteka i izvršavanje odmah nakon učitavanja, bez čekanja da se ostatak stranice obradi */ /* Dozvoljava pretraživaču da počne paralelno učitavati js datoteke bez zaustavljanja dalje obrade stranice. Njihovo izvršenje se događa nakon potpunog raščlanjivanja modela objekta dokumenta */

Svojstva i atributi objekta dokumenta u JavaScript-u

Objekt dokumenta predstavlja web stranicu.

Važno: Za pristup svojstvima i metodama objekta u javaScript-u, kao i kada radite s drugim objektima, koristi se notacija točkama:

one. prvo se upisuje sam objekat, zatim se kroz tačku i bez razmaka označava njegovo svojstvo, atribut ili metoda

object.property object.attribute object.method()

Pogledajmo primjer:

Primjer: neka postoji oznaka u html dokumentu

Moj element

i specifično za njega css stil(čak i dva stila, drugi će biti koristan za zadatak):

.small( boja: crvena; veličina fonta: mala;) .big( boja: plava; veličina fonta: velika;)

.small( boja:crvena; veličina fonta:mala; ) .big( boja:plava; veličina fonta:velika; )

potrebno:

postaviti novo svojstvo objekta, dodijeliti mu vrijednost i prikazati ovu vrijednost;

prikazati vrijednost atributa objekta;

promijeniti vrijednost atributa objekta.

Završimo zadatak redom:
✍ Rješenje:

Od ovoga javascript jezik, tada se objekt može izmisliti i dodijeliti bilo koje svojstvo sa bilo kojom vrijednošću. Ali prvo, hajde da pristupimo objektu (pristup objektu će biti detaljno razmotren kasnije u ovoj lekciji):

// pristup objektu po njegovom id-u var element = document.getElementById("MyElem"); element.myProperty = 5; // dodjeljuje svojstvo alert(element.myProperty); // prikaz u dijaloškom okviru

Sljedeći zadatak se odnosi na atribut objekta. Atribut objekta su atributi oznake. One. u našem slučaju postoje dva od njih: atribut klase sa vrijednošću small i atribut id. Radit ćemo sa atributom klase.

Sada dodajmo javascript kod za prikaz vrijednosti atributa našeg objekta. Šifra mora biti poslije glavne oznake:

// pristup objektu po njegovom id-u var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // prikaz u dijaloškom okviru

I posljednji zadatak: promjena vrijednosti atributa. Imamo stil za ovo. "veliki". Zamijenimo vrijednost atributa klase ovim stilom:

// pristup objektu po njegovom id-u var element = document.getElementById("MyElem"); element.setAttribute("class","big");

Kao rezultat, naš element će postati veći i obojen u plavo (klasa velika).

Sada pogledajmo bliže metode korištene u primjeru za rad s atributima.

Metode za rad sa atributima u JavaScript-u

Atributi se mogu dodavati, brisati i mijenjati. Za to postoje posebne metode:

• Dodavanje atributa (postavljanje nove vrijednosti za njega):

getAttribute(attr)

• Provjera prisutnosti ovog atributa:

removeAtribut(attr)

Različiti načini rada sa atributima

Primjer: Ispišite vrijednost atributa vrijednosti tekstualnog bloka.

✍ Rješenje:

• Neka postoji blok teksta:

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

• Pogledajmo nekoliko načina da dobijete vrijednost atributa (koristite alert() metodu za izlaz):

elem.getAttribute("vrijednost")

elem.getAttribute("vrijednost")

2. oznaka tačke:

elem.attributes.value

elem.attributes.value

3. notacija zagrada:

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


Također možete postaviti vrijednosti atributa na nekoliko načina:

var x = "ključ"; // key - naziv atributa, val - vrijednost za atribut // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

Svojstva elementa tijela

Preko objekta dokumenta možete pristupiti tijelu dokumenta - oznaci tijela - s nekim korisnim svojstvima.

Na primjer, oznaka body ima dva svojstva: širinu i visinu prozora klijenta:

document.body.clientHeight — visina prozora klijenta
document.body.clientWidth — širina prozora klijenta


Ali najvažnije je, kao što smo već naučili, da se preko objekta dokumenta, kroz posebne metode, omogućava pristup svim elementima stranice, odnosno tagovima.

Važno: Prilikom pristupa oznakama stranice na ovaj način, skripta mora biti na kraju stabla elemenata, prije zatvaranja body ! Budući da bi u trenutku kada se skripta izvrši, svi elementi bi već trebali biti "nacrtani" od strane pretraživača na ekranu

Posao js8_1 . Prikažite poruku o veličini prozora pretraživača: na primjer, “Dimenzije prozora pretraživača 600 x 400”

Pristup elementima dokumenta u JavaScript-u

Postoji nekoliko opcija za pristup ili traženje objekata:

Pretraživanje po ID-u (ili metodi getElementById), vraća određeni element

Pretraga po imenu oznake (ili metodi getElementsByTagName), vraća niz elemenata

Pretraga po atributu imena (ili metodi getElementsByName), vraća niz elemenata

Preko roditeljskih elemenata (dobivanje sve djece)

Razmotrimo svaku od opcija detaljnije.

Pristup elementu preko njegovog id atributa

Sintaksa: document.getElementById(id)

Metoda getElementById() vraća sam element, koji se zatim može koristiti za pristup podacima

Primjer: Stranica ima tekstualno polje sa atributom id="cake":

...

Neophodno

✍ Rješenje:

alert(document.getElementById("cake").value); // vraća "broj kolača"

Možete učiniti istu stvar pristupanjem objektu preko varijable:

var a=document.getElementById("torta"); upozorenje (a.vrijednost); // prikazuje vrijednost atributa value, tj. tekst "broj kolača"

Važno: Skripta se mora nalaziti iza oznake!

Pristup nizu elemenata preko oznake imena i preko indeksa niza

sintaksa:
document.getElementsByTagName(name);

Primjer: Stranica ima tekstualno polje (oznaku za unos) s atributom vrijednosti:

...

Obavezno: prikažite vrijednost njegovog atributa value

Metoda getElementsByTagName omogućava pristup preko varijable svim ulaznim elementima (tj. nizu ulaznih elemenata), čak i ako je ovaj element jedini na stranici. Za pristup određenom elementu, na primjer prvom, naznačujemo njegov indeks (niz počinje od indeksa nula).

✍ Rješenje:

Specifičnom elementu pristupamo indeksom:

var a =document.getElementsByTagName("input"); upozorenje (a.vrijednost); // vraća "broj kolača"

Pristup nizu elemenata po vrijednosti atributa name

sintaksa:
document.getElementsByName(name);

Metoda getElementsByName("...") vraća niz objekata čiji je atribut imena jednak vrijednosti specificiranoj kao parametar metode. Ako postoji samo jedan takav element na stranici, onda metoda i dalje vraća niz (sa samo jednim elementom).

Primjer: recimo da postoji element u dokumentu:

var element = document.getElementsByName("MyElem"); upozorenje(element.vrijednost);

IN u ovom primjeru postoji samo jedan element, ali se pristupa nultom elementu niza.

Bitan: Metoda radi samo s onim elementima za koje je atribut name eksplicitno naveden u specifikaciji: to su form , input , a , select , textarea i niz drugih, rjeđih, oznaka.

Metoda document.getElementsByName neće raditi s drugim elementima kao što su div, p, itd.

Pristup potomcima roditeljskog elementa

Djeci se pristupa u javascriptu preko svojstva childNodes. Svojstvo pripada roditeljskom objektu.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Pogledajmo primjer gdje su oznake slike smještene u kontejner koji se zove div oznaka. Dakle, div oznaka je roditelj podataka o slici, a same img oznake su, shodno tome, djeca div oznake:

Sada idemo na izlaz na modalni prozor vrijednosti elemenata niza sa potomcima, tj. img oznake:

var myDiv=document.getElementById("div_for_img"); // pristup roditeljskom kontejneru var childMas=myDiv.childNodes; // niz potomaka za (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Imajte na umu da je zgodno koristiti petlju za iteraciju kroz elemente niza potomaka. One. u našem primjeru dobijamo ciklus:

... za (var a u childMas) ( alert(childMas[ a].src ) ; )

Za (var a u childMas)( alert(childMas[a].src); )

Drugi načini pristupa elementima

Pogledajmo druge metode koristeći primjer:

1 3 4

1 3 4

Pristup:

... // neželjeni i zastarjeli pristupnici elementa: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // tekstualno upozorenje(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 upozorenje(document.f .b .type) ; // dugme alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // preferirane metode za pristup elementima alert(document.getElementById ("t" ) .type ) ; // tekstualno upozorenje(document.getElementById ("s") .name) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4 ...

... // neželjene i zastarjele metode pristupa elementima: alert(document.forms.name); // f alert(document.forms.elements.type); // tekstualno upozorenje(document.forms.elements.options.id); // o2 upozorenje(document.f.b.type); // dugme alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // preferirane metode za pristup elementima alert(document.getElementById("t").type); // tekstualno upozorenje(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Primjer: U HTML dokumentu kreirajte dugme i tekstualno polje. Koristeći skriptu, obojite pozadinu dugmeta (svojstvo style.backgroundColor dugmeta) i prikažite natpis "Zdravo!" u tekstualnom polju (atribut vrijednosti).

HTML kod:

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

Opcija 2:

document.getElementById ("t1" ) .setAttribute ( "vrijednost", "Zdravo!") ; document.getElementById("b1") .style .backgroundColor = "crveno";

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

Zadatak Js8_2. Kreirajte oznake tekstualnih polja kao što je prikazano na slici. Dajte im odgovarajuće (prikazano na slici) vrijednosti id atributa. Koristeći skriptu, dodajte vrijednost “0” svim numeričkim poljima (pretpostavljajući numeričke vrijednosti)

Provjera da su podaci obrasca ispravno uneseni

Je li polje ostalo prazno?

Ne može se vjerovati korisničkom unosu. Nerazumno je pretpostaviti da će korisnici provjeravati podatke prilikom unosa podataka. To znači da za ovo morate koristiti javascript.

Da biste provjerili da li je polje za tekst ostavljeno prazno (na primjer, nakon što je korisnik popunio podatke nekog obrasca), treba se obratiti na svojstvo vrijednosti. Ako je vrijednost imovine prazan red(""), što znači da je potrebno na neki način obavijestiti korisnika o tome.

if(document.getElementById("name").value=="") (neke radnje, na primjer, prikazivanje poruke u kojoj se traži da popunite polje);

Osim toga, možete i bez skripte. Na ulaznoj oznaci tekstualno polje postoji atribut uzorka. naznačena je njegova vrijednost regularni izraz za validaciju podataka u datom tekstualnom polju obrasca. Ako je atribut prisutan uzorak, tada obrazac neće biti dostavljen sve dok ovo tekstualno polje nije ispravno popunjeno.
Na primjer, da provjerite da li je polje ostavljeno prazno:

Umjesto toga pošaljite tekst numerička vrijednost: funkcija jeNaN

Ako polje zahtijeva unos numeričke vrijednosti, ali umjesto toga korisnik unosi tekst, tada se mora koristiti funkcija isNaN. "nije broj?"), koji provjerava tip ulaznih podataka i vraća true ako se umjesto numeričkih unese tekstualni podatak.

To. ako se vrati true, tada korisnik mora biti obaviješten da unese ispravan format, tj. broj.

if(isNaN(document.getElementById("minutes").value))(upozorenje koje zahtijeva da unesete numeričke podatke);

Data stranica sa elementima za popunjavanje:


Fragment html kod:

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

ime: Broj krofni: Minute: Sažetak: porez: rezultat: ...

ime:
Broj krofni:
Minute:
Sažetak:
porez:
rezultat:
...

potrebno:
Popunite prazna polja u isječku koda ispod koji provjerava da li su dva tekstualna polja ispravno popunjena: Ime(id="name") i minuta(id="minuta"). Koristite provjere da osigurate da je polje ostavljeno prazno ("") i da je numeričko polje ispravno popunjeno (isNaN).

* Izvršite zadatak i sa atributom uzorka tekstualnih polja koristeći .

Fragment skripte:

Kod koristi prethodno naučene uslove za izgradnju složenih uslova.

Novi koncept za vas je pozivanje funkcije kao obrađivača događaja gumba:
onclick="placeOrder();"
Kada se klikne na dugme, funkcija placeOrder() će biti pozvana

Možete kreirati prilagođeno binding binding, koji će provjeriti vrijednost specifičnog vidljivog logičkog vrijednosti prije dodavanja ili ne atributa. Pogledajte ovaj primjer:

Ko.bindingHandlers.attrIf = ( ažuriranje: funkcija (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (prikaži) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( za (var k u h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); veza

Volio bih da mogu samo odgovoriti @gbs, ali ne mogu. Moje rješenje bi bilo da imam dva identična HTML element: jedan sa atributom, bez njega i nokaut uslov za dodavanje jednog od njih prema elementu. I ja sam svjestan ovog uobičajenog očekivanja, ali koje je rješenje efikasnije?

Ovaj vodič je o čitanju i promjeni atributa elemenata u jQueryju.

Atributi su par ime/vrijednost koji su dodijeljeni elementima u oznaci. Primjeri atributa ( href, naslov, src, klasa):

Ovdje je sažetak teksta

• attr() za čitanje, dodavanje i promjenu atributa
• removeAttr() za uklanjanje atributa

Ova lekcija pokriva rad sa metodama attr() i removeAttr().

Postoje posebne jQuery metode za rad sa CSS klasama, koje su opisane u drugoj lekciji. Kada radite na projektu u jQueryju, morate mnogo manipulirati CSS klasama, a atribut klase može sadržavati više imena klasa, što rad s njim čini mnogo složenijim od drugih atributa.

Ako ćete raditi sa vrijednostima polja za unos, onda je bolje koristiti metodu val() koja ne samo da pruža pojednostavljen način rada s atributom vrijednosti, već može čitati i postavljati vrijednosti u odabranim elementima liste za odabir.

Čitanje vrijednosti atributa

Čitanje vrijednosti atributa elementa je jednostavno. Trebate samo pozvati metodu attr() na jQuery objektu koji sadrži element, proslijeđujući mu ime atributa za čitanje. Metoda vraća vrijednost atributa:

// Ispis vrijednosti "href" atributa upozorenja elementa #myLink ($("a#myLink").attr("href"));

Ako vaš jQuery objekt sadrži više elemenata, metoda attr() čita vrijednosti atributa samo za prvi element u skupu.

Postavljanje vrijednosti atributa

Metoda attr() se također može koristiti za dodavanje ili promjenu vrijednosti atributa:

• If attribute ne postoji u elementu, biće dodano i biće mu dodeljena navedena vrednost.
• If attribute već postoji, njegova vrijednost će biti ažurirano datu vrijednost.

Postoje tri načina za korištenje metode attr() za dodavanje ili promjenu atributa:

Možete dodati/promijeniti atribute za bilo koji element (ili skup elemenata).

Možete dodati/promijeniti nekoliko atributa odjednom za element (ili elemente) specificiranjem mape imena i vrijednosti atributa.

možete dinamički dodati/promijeniti jedan atribut za više elemenata koristeći funkciju povratnog poziva.

Postavite jedan atribut

Da biste postavili ili promijenili atribut elementa, trebate pozvati metodu attr() specificirajući ime i vrijednost atributa. Na primjer:

// Promijenite vrijednost atributa "href" elementa #myLink u vrijednost "http://www.example.com/" // (ako atribut "href" ne postoji, automatski će se kreirati) $("a#myLink"). attr("href", "http://www.example.com/");

Također je moguće postaviti isti atribut za više elemenata:

Postavljanje nekoliko atributa pomoću mape

Možete postaviti više atributa odjednom na jednom ili više elemenata koristeći mapu. Ovo je lista parova ime/vrijednost koja izgleda ovako:

(ime1: vrijednost1, ime2: vrijednost2, ... )

Sljedeći primjer postavlja dva atributa na img element u isto vrijeme:

// Postavite atribute "src" i "alt" za img element #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Moja fotografija" )) ;

Također možete postaviti atribute za više elemenata:

// Postavite atribute "src" i "alt" za sve img elemente $("img").attr(( "src": "mypic.jpg", "alt": "Moja fotografija" ));

Postavljanje atributa pomoću funkcije povratnog poziva

Umjesto prosljeđivanja vrijednosti atributa metodi attr(), možete proslijediti ime funkcije povratnog poziva. Na ovaj način možete dinamički postaviti vrijednosti atributa za više elemenata na osnovu pozicije elementa, postojeće vrijednosti atributa ili drugih svojstava.

Funkcija return mora uzeti dva argumenta:

• Indeks pozicije trenutno odabranog elementa u skupu (počinje od nule)
• stara vrijednost atributa za trenutno odabrani element

Vrijednost koju vraća funkcija koristi se za zamjenu vrijednosti atributa.

Pored trenutne pozicije elementa i stare vrijednosti atributa, vaša funkcija može pristupiti samom elementu pomoću ključa reči ovo. Na ovaj način možete pristupiti bilo kojem svojstvu elementa ili metodi iz funkcije povratnog poziva.

Primjer koristi funkciju povratnog poziva za dodavanje alt atributa svakoj slici na stranici na osnovu položaja slike i njenog src atributa:

$(init); function init() ( // Postavite atribut "alt" za sve "img" elemente $("img").attr("alt", setAltText); funkcija setAltText(index, attributeValue) (povratak ("Slika " + (indeks +1) + ": " + this.src); ) )

Nakon pokretanja koda, prva slika će imati alt atribut sa vrijednošću "Slika 1: myphoto.jpg", a druga slika će imati alt atribut sa vrijednošću "Slika 2: vaša fotografija.jpg".

Uklanjanje atributa

Da biste uklonili atribut iz elementa, morate pozvati metodu removeAttr() i proslijediti joj ime atributa za uklanjanje. Na primjer:

// Uklonite atribut "title" iz #myLink elementa $("a#myLink").removeAttr("title");

Također možete pozvati metodu removeAttr() na jQuery objektu koji sadrži više elemenata. Metoda removeAttr() će ukloniti navedeni atribut iz svih elemenata:

// Uklonimo atribut "title" sa svih veza $("a").removeAttr("title");

Sažetak

Ova lekcija pokrila je probleme rada sa atributima elementa u jQueryju:

• Čitanje vrijednosti atributa
• Postavljanje jednog atributa
• Postavljanje nekoliko različitih atributa odjednom
• Korištenje funkcije povratnog poziva za dinamičko postavljanje vrijednosti atributa na skupu elemenata
• Uklanjanje atributa iz elementa

Postavlja vrijednost atributa na specificirani element. Ako atribut već postoji, vrijednost se ažurira; u suprotnom se dodaje novi atribut sa navedenim imenom i vrijednošću.

Sintaksa Element.setAttribute( ime, vrijednost); Ime parametra DOMString koji specificira ime atributa čija vrijednost treba postaviti. Ime atributa se automatski pretvara u mala slova kada se pozove setAttribute() na HTML elementu u HTML dokumentu. value DOMString koji sadrži vrijednost koju treba dodijeliti atributu. Svaka specificirana vrijednost koja nije niska se automatski pretvara u string.

Logički atributi se smatraju istinitim ako su uopće prisutni na elementu, bez obzira na njihovu stvarnu vrijednost; po pravilu treba navesti prazan niz ("") u vrijednosti (neki ljudi koriste ime atributa; ovo radi, ali je nestandardno). Pogledajte dolje za praktičnu demonstraciju.

Pošto se navedena vrijednost pretvara u string, navođenje null ne mora nužno učiniti ono što očekujete. Umjesto uklanjanja atributa ili postavljanja njegove vrijednosti na null, umjesto toga postavlja vrijednost atributa na string "null". Ako želite ukloniti atribut, pozovite removeAttribute() .

Povratna vrijednost Izuzeci InvalidCharacterError Navedeno ime atributa sadrži jedan ili više znakova koji nisu važeći u imenima atributa. Primjer

U sljedećem primjeru, setAttribute() se koristi za postavljanje atributa na .

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

Ovo pokazuje dvije stvari:

• Prvi poziv za setAttribute() iznad pokazuje promjenu vrijednosti atributa name u "helloButton". Ovo možete vidjeti pomoću pregledača stranica vašeg pretraživača (Chrome, Edge, Firefox, Safari).
• Da biste postavili vrijednost Booleovog atributa, kao što je disabled , možete odrediti bilo koju vrijednost. Prazan niz ili ime atributa su preporučene vrijednosti. Bitno je samo da ako je atribut uopće prisutan, bez obzira na njegovu stvarnu vrijednost, smatra se da je njegova vrijednost istinita. Odsustvo atributa znači da je njegova vrijednost lažna. Postavljanjem vrijednosti disabled atributa na prazan niz (""), postavljamo disabled na true , što rezultira deaktiviranjem dugmeta.

DOM metode koje se bave atributima elementa:

Metode koje nisu svjesne imenskog prostora, najčešće korištene metode Varijante svjesne prostora imena (DOM Level 2) DOM Level 1 metode za direktno bavljenje Attr čvorovima (rijetko se koriste) DOM Level 2 metode svjesne imenskog prostora za direktno bavljenje Attr čvorovima (rijetko se koriste)

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

Specifikacija

• DOM Level 2 Core: setAttribute (uveden u DOM Level 1 Core)

Kompatibilnost pretraživača

Tabela kompatibilnosti na ovoj stranici je generirana iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

Ažurirajte podatke o kompatibilnosti na GitHub-u

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android web pregled Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung InternetsetAttribute

Chrome Potpuna podrška Da	Edge Puna podrška 12	Firefox Puna podrška Da	IE puna podrška 5 Bilješke Potpuna podrška 5 Bilješke Bilješke U Internet Exploreru 7 i starijim verzijama setAttribute ne postavlja stilove i uklanja događaje kada pokušate da ih postavite.	Opera Puna podrška Da	Safari puna podrška 6	WebView Android Puna podrška Da	Chrome Android Potpuna podrška Da	Firefox Android Puna podrška Da	Opera Android Puna podrška Da	Safari iOS Potpuna podrška Da	Samsung Internet Android Puna podrška Da

Legenda Potpuna podrška Potpuna podrška Pogledajte napomene o implementaciji. Pogledajte napomene o implementaciji. Gecko notes

Korištenje setAttribute() za izmjenu određenih atributa, prije svega vrijednosti u XUL-u, radi nedosljedno, jer atribut specificira zadanu vrijednost. Da biste pristupili ili izmijenili trenutne vrijednosti, trebali biste koristiti svojstva. Na primjer, koristite Element.value umjesto Element.setAttribute() .

U ovom članku ćemo se upoznati sa svojstvima i atributima DOM-a, razmotriti kako se razlikuju i kako ispravno raditi s njima. Pogledajmo koje metode JavaScript ima za izvođenje operacija nad atributima.

Koja je razlika između atributa i DOM svojstva?

Atributi su HTML entiteti pomoću kojih možemo dodati određene podatke elementima u HTML kodu.

Kada pretraživač zatraži stranicu, on dobija njen izvorni HTML kod. Nakon toga, on analizira ovaj kod i na osnovu njega gradi DOM. Tokom ovog procesa, HTML atributi elemenata se prevode u odgovarajuća DOM svojstva.

Na primjer, pretraživač će, kada čita sljedeći red HTML koda, kreirati sljedeća DOM svojstva za ovaj element: id , className , src i alt .

Ovim svojstvima se pristupa u JavaScript kodu kao svojstvima objekta. Objekt ovdje je DOM čvor (element).

Primjer u kojem dobijamo vrijednosti DOM svojstava za gore navedeni element i prenosimo njihove vrijednosti na konzolu:

// dobijemo element var brandImg = document.querySelector("#brand"); // prikazuje vrijednosti DOM svojstava elementa na konzoli console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "logo stranice"

Neka imena DOM svojstava ne odgovaraju imenima atributa. Jedan od njih je atribut klase. Ovaj atribut odgovara DOM svojstvu className. Ova razlika je zbog činjenice da je klasa ključna riječ u JavaScript-u je rezervisan i ne može se koristiti. Zbog toga su programeri standarda odlučili da koriste neko drugo ime za usklađenost, koje je izabrano kao ime klase.

Još jedna nijansa je povezana s činjenicom da prijevod HTML atributa navedenih u izvorni kod dokumenta, DOM svojstva nisu uvijek implementirana jedan prema jedan.

Ako element ima nestandardni HTML atribut, tada se svojstvo koje mu odgovara u DOM-u ne kreira.

// dobijemo element mydiv = document.querySelector("#mydiv"); // dobijemo vrijednost alt svojstva elementa i iznesemo je na konzolu console.log(mydiv.alt); // nedefinirano // dobijemo vrijednost alt atributa elementa i ispustimo je na konzolu console.log(mydiv.getAttribute("alt")); // "..."

Druga razlika je u tome što vrijednosti određenih HTML atributa i njihovih odgovarajućih DOM svojstava mogu biti različite. One. atribut može imati jednu vrijednost, a DOM svojstvo kreirano na osnovu njega može imati drugu.

Jedan od ovih atributa je provjeren.

Vrijednost provjerenog HTML atributa u ovom slučaju je prazan niz. Ali, svojstvo koje odgovara datom atributu u DOM-u će imati istinito. Jer prema pravilima standarda, da bi se postavio na true, dovoljno je samo spomenuti ovaj atribut u HTML kodu, i nije bitno koju će vrijednost imati.

Štaviše, čak i ako ne navedemo checked atribut u HTML kodu za ulazni element sa poljem za potvrdu tipa, tada će za njega i dalje biti kreirano označeno svojstvo u DOM-u, ali će biti jednako false.

Osim toga, JavaScript vam također omogućava rad sa atributima. Za to postoje posebne metode u DOM API-ju. Ali preporučljivo ih je koristiti samo kada zaista trebate raditi s podacima na ovaj način.

Istovremeno, morate znati da kada promijenimo DOM svojstvo elementa, mijenja se i odgovarajući atribut i obrnuto. Ali ovaj proces u pretraživačima se ne izvodi uvijek jedan na jedan.

Glavne razlike između DOM svojstava i atributa su:

• vrijednost atributa je uvijek niz, a vrijednost DOM svojstva je određeni tip podataka (ne nužno string);
• Ime atributa ne razlikuje velika i mala slova, a DOM svojstva su osjetljiva na velika i mala slova. One. u HTML kodu možemo, na primjer, napisati HTML id atribut kao Id, ID, itd. Isto se odnosi i na ime atributa koje navodimo u posebnim JavaScript metodama za rad s njim. Ali možemo pristupiti odgovarajućem DOM svojstvu samo po ID-u i ničemu drugom.

Rad sa DOM svojstvima elementa

Rad sa svojstvima elemenata u JavaScript-u, kao što je gore navedeno, obavlja se kao sa svojstvima objekata.

Ali da bi se pristupilo svojstvu elementa, ono prvo mora biti dobijeno. Možete dobiti DOM element u JavaScriptu, na primjer, koristeći univerzalnu metodu querySelector i kolekciju DOM elementi, na primjer, preko querySelectorAll .

Kao prvi primjer, razmotrite sljedeći HTML element:

Tekst informativne poruke... var alert = document.querySelector("#alert"); // dobijemo element

Na osnovu toga ćemo analizirati kako doći do DOM svojstava, promijeniti ih i dodati nove.

Čitanje DOM vrijednosti svojstva:

// dobijemo vrijednost id svojstva DOM var alertId = alert.id; // "alert" // dobijemo vrijednost DOM svojstva className var alertClass = alert.className; // "alert alert-info" // dobijemo vrijednost naslova svojstva DOM var alertId = alert.title; // "Tekst pomoći..."

Promjena vrijednosti DOM svojstva:

// da biste promijenili vrijednost DOM svojstva, potrebno je samo da mu dodijelite novu vrijednost alert.title = "Novi tekst opisa alata"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Dodavanje DOM svojstava:

Alert.lang = "ru"; // postavlja svojstvo lang na "ru" alert.dir = "ltr"; // postavlja svojstvo dir na "ltr"

Primjer u kojem ćemo na konzolu izbaciti sve vrijednosti klase koje p elementi imaju na stranici:

Var paragrafi = document.querySelectorAll("p"); za (var i = 0, dužina = paragrafa.dužina; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Primjer u kojem smo postavili svojstvo lang na sve elemente sa klasom sadržaja sa vrijednošću “ru”:

Var contents = document.querySelectorAll(".content"); za (var i = 0, dužina = sadržaj.dužina; i< length; i++) { contents[i].lang = "ru"; }

Atributi elemenata i metode za rad s njima

Atributi se inicijalno postavljaju u HTML kodu. Iako su na neki način povezani sa svojstvima, nisu ista stvar. U većini slučajeva, trebali biste raditi sa svojstvima i pristupati atributima samo kada vam je to zaista potrebno.

Vrijednosti atributa, za razliku od DOM svojstava, kao što je gore navedeno, uvijek su string.

JavaScript ima četiri metode za izvođenje operacija povezanih s atributima:

• .hasAttribute("attribute_name") – provjerava da li element ima navedeni atribut. Ako element ima atribut koji se provjerava, onda ovu metodu vraća true, inače netačno.
• .getAttribute("attribute_name") – dobiva vrijednost atributa. Ako element nema navedeni atribut, onda ova metoda vraća prazan string ("") ili null .
• .setAttribute("attribute_name", "attribute_value") – postavlja navedeni atribut sa navedenom vrijednošću elementu. Ako element ima navedeni atribut, onda će ovaj metod jednostavno promijeniti njegovu vrijednost.
• .removeAttribute("attribute_name") - uklanja navedeni atribut iz elementa.

Pogledajmo primjere.

Vrlo zanimljiv primjer sa atributom value.

Primjer sa atributom vrijednosti var name = document.querySelector("input"); // dobijemo element

Uzmimo vrijednost atributa value i vrijednost DOM svojstva:

// dobijemo vrijednost atributa value elementa name.getAttribute("value"); // "Bob" // dobijemo vrijednost vrijednosti DOM svojstva name.value; // "Bob" // ažuriramo vrijednost atributa value, postavimo je na novu vrijednost name.setAttribute("value", "Tom"); // "Tom" // dobijemo vrijednost vrijednosti DOM svojstva name.value; // "Tom"

Ovaj primjer pokazuje da kada se promijeni atribut value, pretraživač automatski mijenja vrijednost DOM svojstvo u skladu s tim.

Sada uradimo suprotno, naime, promijenimo vrijednost DOM svojstva i provjerimo mijenja li se vrijednost atributa:

// postavlja novu vrijednost za vrijednost DOM svojstva name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Ovaj primjer pokazuje da promjena DOM svojstva ne dovodi uvijek do odgovarajuće promjene u atributu. One. u ovom slučaju, promjena vrijednosti DOM svojstva ne mijenja njegov odgovarajući atribut.

Ista stvar će se dogoditi kada korisnik unese tekst u ovo polje. Vrijednost DOM svojstva će sadržavati stvarnu vrijednost, a odgovarajući atribut će sadržavati originalnu vrijednost ili onu koju smo postavili, na primjer, pomoću metode setAttribute.

Ovaj primjer pokazuje da je ispravnije uvijek raditi sa DOM svojstvima, a atributu morate pristupiti samo kada je to zaista neophodno.

Čak i u slučaju kada trebate dobiti početnu vrijednost koju smo postavili u HTML-u, možete koristiti svojstvo. Svojstvo koje sadrži početnu vrijednost atributa value naziva se defaultValue.

Name.defaultValue; //Tom

Još jedan vrlo zanimljiv primjer, ali sada s atributom href.

Primjer sa href atributom

Primjer gdje trebamo dobiti vrijednost veze onako kako je postavljena u HTML-u.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // puni URL, na primjer: http://localhost/page2.html

U ovom primjeru, atribut href i svojstvo href DOM sadrže različite vrijednosti. Atribut href je ono što postavljamo u kodu, a DOM svojstvo je puni URL. Ova razlika je diktirana standardom da pretraživač mora razriješiti vrijednost href na puni URL.

Stoga, ako trebamo dobiti ono što je u atributu, onda u ovom slučaju ne možemo bez metode getAttribute.

Na kraju, pogledajmo odabrani atribut.

Primjer sa odabranim atributom

Primjer koji pokazuje kako možete dobiti vrijednost odabrane opcije odabira:

bez ocjene 1 2 3 4 5 // dobijemo element odabira var mark = document.querySelector("#mark"); // 1 put mark.querySelector("option:checked").value; // Metoda 2 mark.value;

Primjer koji pokazuje kako možete dobiti vrijednosti odabrane opcije u elementu odabira:

bez ocjene 1 2 3 4 5 // dobijemo element odabira var mark = document.querySelector("#mark"); // Metoda 1 (kreiranjem niza i punjenjem vrijednostima odabranih opcija) var arr = ; for (var i = 0, dužina = 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.vrijednost)

Drugi način rada sa atributima (svojstvo atributa)

U JavaScript-u, svaki element ima svojstvo atributa, koje se može koristiti za preuzimanje svih njegovih atributa kao NamedNodeMap objekta.

Ova metoda može se koristiti kada trebate, na primjer, iterirati kroz sve atribute elementa.

Atributu u ovoj kolekciji pristupa se preko njegovog indeksa ili korištenjem metode stavke. Atributi u ovoj kolekciji se broje od 0.

Na primjer, prikažimo sve atribute određenog elementa na konzoli:

VOLIM JAVASCRIPT

// dobijamo element po poruci njegovog identifikatora var message = document.querySelector("#message"); // dobijemo njegove atribute var attrs = message.attributes; // prolazimo kroz sve atribute koristeći petlju (attrs.length – broj atributa) za (var i = 0, dužina = 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;

Osim toga, s ovom kolekcijom možete raditi i na sljedeće metode:

• .getNamedItem("attribute_name") – dobiva vrijednost navedenog atributa (ako navedeni atribut nije prisutan na elementu, rezultat će biti null).
• .setNamedItem("attribute_node") – dodaje novi atribut elementu ili ažurira vrijednost postojećeg. Da biste kreirali atribut, morate koristiti metodu document.createAttribute() kojoj se kao parametar mora proslijediti ime atributa. Kreiranom atributu se tada mora dodijeliti vrijednost pomoću svojstva value.
• .removeNamedItem("attribute_name") – uklanja navedeni atribut iz elementa (vraća uklonjeni atribut kao rezultat).

Primjer rada s atributima putem metoda getNamedItem, setNamedItem i removeNamedItem:

VOLIM JAVASCRIPT

// dobijanje elementa po poruci njegovog identifikatora var message = document.querySelector("#message"); // dobijemo njegove atribute var attrs = message.attributes; // Zadatak br. 1. Dobijte vrijednost atributa id console.log(attrs.getNamedItem("id")); // Zadatak br. 2. Postavite atribut (ako postoji, promijenite njegovu vrijednost, u suprotnom dodajte novi) // kreirajte atribut stila i spremite ga u varijablu attrStyle var attrStyle = document.createAttribute("style"); // dodjeljuje vrijednost atributu koristeći vrijednost svojstva attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

Zadaci

• Ispišite na konzolu sve elemente dokumenta koji imaju atribut id.
• Dodajte atribut naslova svim slikama na stranici ako nemaju ovaj atribut. Postavite vrijednost atributa jednaku vrijednosti alt atributa.