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

• Općenito, objekt je složeni tip podataka koji kombinira mnoge vrijednosti u zajedničku jedinicu i omogućuje pohranu i dohvaćanje vrijednosti prema njihovim imenima na zahtjev.

Ranije smo se već počeli upoznavati s konceptom u javascriptu.

• U javascriptu postoji DOM - Objektni model dokumenta— objektni model web stranice (html stranica).
• Oznake dokumenta ili, kako se još kaže, čvorovi dokumenta su njegovi objekti.

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

Element skripte ima sljedeće atribute:

odgoditi (čekati da se stranica potpuno učita).

Primjer:

/* Omogućuje paralelno učitavanje js datoteka i njihovo izvršavanje odmah nakon učitavanja, bez čekanja da se ostatak stranice obradi */ /* Omogućuje pregledniku da počne paralelno učitavati js datoteke bez zaustavljanja daljnje obrade stranice. Njihovo se izvršavanje događa nakon potpunog parsiranja objektnog modela dokumenta */

Svojstva i atributi objekta dokumenta u JavaScriptu

Objekt dokumenta predstavlja web stranicu.

Važno: Za pristup svojstvima i metodama objekta u javaScriptu, kao i pri radu s drugim objektima, koristi se zapis točka:

oni. prvo se napiše sam objekt, zatim se kroz točku i bez razmaka naznači njegovo svojstvo, atribut ili metoda

objekt.svojstvo objekt.atribut objekt.metoda()

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

.mali( boja : crvena ; veličina slova : mali ; ) .veliki ( boja : plava ; veličina slova : veliki; )

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

Potrebno:

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

prikazati vrijednost atributa objekta;

promijeniti vrijednost atributa objekta.

Izvršimo zadatak redom:
✍ Rješenje:

Od ovoga javascript jezik, tada se objekt može izmisliti i dodijeliti mu bilo koje svojstvo s bilo kojom vrijednošću. Ali prvo, pristupimo objektu (o pristupu objektu će se raspravljati u detalje kasnije u ovoj lekciji):

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

Sljedeći zadatak odnosi se na atribut objekta. Atribut objekta je atribut oznake. Oni. u našem slučaju postoje dva: atribut class s vrijednošću small i atribut id. Radit ćemo s atributom klase.

Dodajmo sada javascript kod za prikaz vrijednosti atributa našeg objekta. Kod mora biti nakon glavne oznake:

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

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

// pristup objektu prema njegovom id-u var element = document.getElementById("MyElem"); element.setAttribute("klasa","veliki");

Kao rezultat toga, naš će element postati veći i obojan u plavo (class big).

Pogledajmo sada pobliže metode korištene u primjeru za rad s atributima.

Metode za rad s atributima u JavaScriptu

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:

removeAttribute(attr)

Različiti načini rada s atributima

Primjer: Ispis vrijednosti atributa vrijednosti bloka teksta.

✍ Rješenje:

• Neka postoji blok teksta:

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

• Pogledajmo nekoliko načina za dobivanje vrijednosti atributa (koristite metodu alert() za izlaz):

elem.getAttribute("vrijednost")

elem.getAttribute("vrijednost")

2. zapis točka:

elem.atributi.vrijednost

elem.atributi.vrijednost

3. oznaka u zagradi:

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


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

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

Svojstva elemenata tijela

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

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

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


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

Važno: Kada se na ovaj način pristupa oznakama stranice, skripta mora biti na kraju stabla elementa, prije zatvaranja tijela! Budući da do trenutka kada se skripta izvrši, svi elementi bi već trebali biti "iscrtani" od strane preglednika na ekranu

Posao js8_1. Prikaži poruku o veličini prozora preglednika: na primjer, “dimenzije prozora preglednika 600 x 400”

Pristup elementima dokumenta u JavaScriptu

Postoji nekoliko opcija za pristup ili traženje objekata:

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

Pretraživanje po nazivu oznake (ili metodi getElementsByTagName), vraća niz elemenata

Pretraživanje po atributu naziva (ili metodi getElementsByName), vraća niz elemenata

Preko nadređenih elemenata (dobivanje svih djece)

Razmotrimo svaku od opcija detaljnije.

Pristup elementu putem 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 s atributom id="cake":

...

Neophodno

✍ Rješenje:

upozorenje(document.getElementById("kolač").vrijednost); // vraća "broj kolača"

Možete učiniti istu stvar pristupom objektu kroz varijablu:

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

Važno: Skripta se mora nalaziti nakon oznake!

Pristup nizu elemenata preko oznake imena i preko indeksa niza

Sintaksa:
document.getElementsByTagName(ime);

Primjer: Stranica ima tekstualno polje (ulazna oznaka) s atributom vrijednosti:

...

Obavezno: prikazati vrijednost atributa vrijednosti

Metoda getElementsByTagName omogućuje pristup kroz varijablu svim ulaznim elementima (tj. nizu ulaznih elemenata), čak i ako je taj element jedini na stranici. Za pristup određenom elementu, na primjer prvom, označavamo njegov indeks (niz počinje s indeksom nula).

✍ Rješenje:

Određenom elementu pristupamo indeksom:

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

Pristup nizu elemenata pomoću vrijednosti atributa name

Sintaksa:
document.getElementsByName(ime);

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

Primjer: recimo da u dokumentu postoji element:

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

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

Važno: Metoda radi samo s onim elementima za koje je atribut name izričito 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 nadređenog elementa

Djeci se pristupa u javascriptu putem svojstva childNodes. Svojstvo pripada nadređenom objektu.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Pogledajmo primjer gdje su oznake slike smještene u spremnik koji se zove div oznaka. Dakle, oznaka div je roditelj slikovnih podataka, a same img oznake su, prema tome, djeca div oznake:

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

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

Imajte na umu da je prikladno koristiti petlju za iteraciju kroz elemente niza potomaka. Oni. u našem primjeru dobivamo ciklus:

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

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

Drugi načini pristupa elementima

Pogledajmo druge metode na primjeru:

1 3 4

1 3 4

Pristup:

... // neželjeni i zastarjeli pristupnici elementima: 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) ; // gumb upozorenje(document.f .s .name ) ; // ss upozorenje(document.f .s .options [ 1 ] .id ) ; // o2 // preferirane metode za pristup elementima alert(document.getElementById ("t" ) .type ) ; // tekstualno upozorenje(document.getElementById ("s" ) .name ) ; // ss upozorenje(document.getElementById ("s") .opcije [ 1 ] .id ) ; // 02 upozorenje(document.getElementById ("o3" ) .text ) ; // 4 ...

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

Primjer: u HTML dokumentu stvorite gumb i tekstualno polje. Pomoću skripte obojite pozadinu gumba (svojstvo style.backgroundColor gumba) i prikažite natpis "Zdravo!" u tekstualno polje (atribut vrijednosti).

HTML kôd:

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

Opcija 2:

document.getElementById ("t1" ) .setAttribute ( "value" , ​​​​"Hello!" ) ; document.getElementById("b1" ) .style .backgroundColor = "red" ;

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

Zadatak Js8_2. Napravite oznake tekstualnog polja kao što je prikazano na slici. Dodijelite im odgovarajuće (prikazane na slici) vrijednosti id atributa. Pomoću skripte dodajte vrijednost "0" svim numeričkim poljima (pretpostavljajući numeričke vrijednosti)

Provjera jesu li podaci u obrascu 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.

Kako biste provjerili je li tekstualno polje ostavljeno prazno (na primjer, nakon što je korisnik ispunio podatke iz upitnika), trebali biste pogledati svojstvo value. Ako je vrijednost imovine prazna linija(""), š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 koja traži da ispunite polje);

Osim toga, možete i bez skripte. Na ulaznoj oznaci polje za tekst postoji atribut uzorka. naznačena je njegova vrijednost regularni izraz za provjeru valjanosti podataka u zadanom tekstualnom polju obrasca. Ako je atribut prisutan uzorak, tada obrazac neće biti poslan dok se ovo tekstno polje ispravno ne ispuni.
Na primjer, da provjerite je li polje prazno:

Tekst umjesto toga brojčana 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 vrstu ulaznih podataka i vraća true ako se umjesto numeričkih podataka unesu tekstualni podaci.

Da. ako se vrati istina, korisnik mora biti obaviješten da unese ispravan format, tj. broj.

if(isNaN(document.getElementById("minutes").value))( upozorenje koje zahtijeva unos numeričkih podataka);

Dana stranica s elementima za popunjavanje:


Fragment html kod:

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

Ime: Broj krafni: minuta: Sažetak: Porez: Proizlaziti: ...

Ime:
Broj krafni:
minuta:
Sažetak:
Porez:
Proizlaziti:
...

Potrebno:
Popunite praznine u donjem isječku koda koji provjerava jesu li dva tekstualna polja ispravno popunjena: Ime(id="ime") i minuta(id="minute"). Upotrijebite provjere kako biste osigurali da polje ostane prazno ("") i da je numeričko polje ispravno popunjeno (isNaN).

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

Fragment skripte:

Kod koristi prethodno naučene uvjete za izradu složenih uvjeta.

Novi koncept za vas je pozivanje funkcije kao rukovatelja događajima gumba:
onclick="placeOrder();"
Kada se klikne na gumb, bit će pozvana funkcija placeOrder().

Možete izraditi prilagođeni binding binding, koji će provjeriti vrijednost specifičnog vidljivog booleana prije dodavanja ili ne dodavanja 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 (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ) ); veza

Volio bih da mogu samo odgovoriti na @gbs, ali ne mogu. Moje rješenje bi bilo imati dva identična HTML element: jedan s atributom, bez njega i uvjet za izbacivanje za dodavanje jednog od njih prema elementu. Svjestan sam i ovog uobičajenog očekivanja, ali koje je rješenje učinkovitije?

Ovaj vodič govori o čitanju i mijenjanju atributa elementa u jQueryju.

Atributi su par ime/vrijednost koji se dodjeljuju elementima u oznaci. Primjeri atributa ( href, titula, src, razreda):

Evo teksta sažetka

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

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

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

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

Čitanje vrijednosti atributa

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

// Ispis vrijednosti atributa "href" 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() također se može koristiti za dodavanje ili promjenu vrijednosti atributa:

• Ako atribut ne postoji u elementu, bit će dodao i bit će mu dodijeljena navedena vrijednost.
• Ako atribut već postoji, njegova će vrijednost biti ažuriran dana vrijednost.

Postoje tri načina korištenja 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) određivanjem mape imena i vrijednosti atributa.

možete dinamički dodati/promijeniti jedan atribut za više elemenata pomoću funkcije povratnog poziva.

Postavite jedan atribut

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

// Promijenite vrijednost atributa "href" elementa #myLink na vrijednost "http://www.example.com/" // (ako atribut "href" ne postoji, automatski će se stvoriti) $("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 karte

Možete postaviti više atributa odjednom na jednom ili više elemenata pomoću karte. Ovo je popis parova ime/vrijednost koji izgleda ovako:

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

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

// Postavite atribute "src" i "alt" za element img #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 naziv funkcije povratnog poziva. Na ovaj način možete dinamički postavljati vrijednosti atributa za više elemenata na temelju položaja elementa, postojeće vrijednosti atributa ili drugih svojstava.

Funkcija return mora uzeti dva argumenta:

• Indeks položaja 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.

Uz trenutnu poziciju elementa i staru vrijednost atributa, vaša funkcija može pristupiti samom elementu pomoću ključa riječi ove. 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 temelju položaja slike i njenog atributa src:

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

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

Uklanjanje atributa

Da biste uklonili atribut iz elementa, trebate pozvati metodu removeAttr() i proslijediti joj naziv atributa koji želite ukloniti. Na primjer:

// Uklonite atribut "title" iz elementa #myLink $("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:

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

Sažetak

Ova lekcija pokriva pitanja rada s atributima elemenata 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 skup elemenata
• Uklanjanje atributa iz elementa

Postavlja vrijednost atributa na navedeni element. Ako atribut već postoji, vrijednost se ažurira; inače se dodaje novi atribut s navedenim imenom i vrijednošću.

Sintaksa Element.setAttribute( Ime, vrijednost); Naziv parametra DOMString koji specificira naziv atributa čija vrijednost treba biti postavljena. Naziv atributa se automatski pretvara u sva mala slova kada se setAttribute() pozove na HTML element u HTML dokumentu. value DOMString koji sadrži vrijednost koju treba dodijeliti atributu. Svaka navedena vrijednost koja nije string automatski se pretvara u niz.

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

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

Povratna vrijednost Iznimke InvalidCharacterError Navedeni naziv atributa sadrži jedan ili više znakova koji nisu valjani u nazivima atributa. Primjer

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

HTML Hello World JavaScript var b = document.querySelector("button"); b.setAttribute("ime", "helloButton"); b.setAttribute("onemogućeno", "");

Ovo pokazuje dvije stvari:

• Prvi poziv setAttribute() iznad pokazuje promjenu vrijednosti atributa name u "helloButton". To možete vidjeti pomoću inspektora stranica vašeg preglednika (Chrome, Edge, Firefox, Safari).
• Za postavljanje vrijednosti Booleovog atributa, kao što je onemogućeno, možete navesti bilo koju vrijednost. Prazan niz ili naziv atributa su preporučene vrijednosti. Sve što je bitno je da ako je atribut uopće prisutan, bez obzira na njegovu stvarnu vrijednost, njegova se vrijednost smatra istinitom. Nedostatak atributa znači da je njegova vrijednost lažna. Postavljanjem vrijednosti atributa disabled na prazan niz (""), disabled postavljamo na true, što rezultira onemogućavanjem gumba.

DOM metode koje se bave atributima elementa:

Metode koje nisu svjesne prostora imena, najčešće korištene metode Varijante svjesne prostora imena (DOM razina 2) Metode DOM razine 1 za izravno postupanje s čvorovima Attr (rijetko se koriste) Metode svjesne prostora DOM razine 2 za izravno postupanje s čvorovima Attr (rijetko se koriste)

setAtribute(DOM 1)	setAtributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAtribute(DOM2)	hasAtributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Specifikacija

• Jezgra DOM razine 2: setAttribute (uvedena u jezgru DOM razine 1)

Kompatibilnost preglednika

Tablica kompatibilnosti na ovoj stranici generirana je 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 GitHubu

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS Samsung InternetsetAtribute

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

Legenda Puna podrška Puna podrška Vidi napomene o implementaciji. Pogledajte napomene o implementaciji. Gecko bilješke

Korištenje setAttribute() za izmjenu određenih atributa, ponajprije vrijednosti u XUL-u, radi nedosljedno jer atribut navodi zadanu vrijednost. Za pristup ili izmjenu trenutnih 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 s njima ispravno raditi. Pogledajmo koje metode JavaScript ima za izvođenje operacija na 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 preglednik zatraži stranicu, prima njezin izvorni HTML kod. Nakon toga analizira ovaj kod i na temelju njega gradi DOM. Tijekom ovog procesa, HTML atributi elemenata prevode se u odgovarajuća DOM svojstva.

Na primjer, preglednik će, kada čita sljedeći redak HTML koda, stvoriti sljedeća DOM svojstva za ovaj element: id, className, src i alt.

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

Primjer u kojem dobivamo vrijednosti svojstava DOM-a za gore navedeni element i šaljemo njihove vrijednosti na konzolu:

// dobivanje elementa var brandImg = document.querySelector("#brand"); // prikaz 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 web stranice"

Nazivi nekih DOM svojstava ne odgovaraju nazivima atributa. Jedan od njih je atribut klase. Ovaj atribut odgovara DOM svojstvu className. Ova razlika je posljedica činjenice da je klasa ključna riječ u JavaScriptu je rezerviran i ne može se koristiti. Zbog toga su programeri standarda odlučili koristiti neki drugi naziv za usklađenost, koji je odabran kao className.

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

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

// dobivanje elementa mydiv = document.querySelector("#mydiv"); // dobivanje vrijednosti alt svojstva elementa i ispis na konzolu console.log(mydiv.alt); // nedefinirano // dobiva vrijednost alt atributa elementa i ispisuje je na konzolu console.log(mydiv.getAttribute("alt")); // "..."

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

Jedan od ovih atributa je označen.

Vrijednost provjerenog HTML atributa u ovom slučaju je prazan niz. Ali, svojstvo koje odgovara danom atributu u DOM-u imat će pravi. Jer prema pravilima standarda, da biste postavili true, dovoljno je samo spomenuti ovaj atribut u HTML kodu, i nije važno koju će vrijednost imati.

Štoviše, čak i ako ne navedemo provjereni atribut u HTML kodu za ulazni element s potvrdnim okvirom tipa, tada će za njega u DOM-u i dalje biti stvoreno potvrđeno svojstvo, ali ono će biti jednako lažnom.

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

Pritom morate znati da kada promijenimo DOM svojstvo elementa, mijenja se i odgovarajući atribut i obrnuto. Ali ovaj se proces u preglednicima ne izvodi uvijek jedan na jedan.

Glavne razlike između DOM svojstava i atributa su:

• vrijednost atributa je uvijek niz, a vrijednost svojstva DOM je određeni tip podataka (ne nužno niz);
• Naziv atributa ne razlikuje velika i mala slova, a svojstva DOM-a razlikuju velika i mala slova. Oni. u HTML kodu možemo, na primjer, napisati HTML id atribut kao Id, ID, itd. Isto vrijedi i za naziv atributa, koji specificiramo u posebnim JavaScript metodama za rad s njim. Ali možemo pristupiti odgovarajućem DOM svojstvu samo putem ID-a i ničim drugim.

Rad s DOM svojstvima elementa

Rad sa svojstvima elemenata u JavaScriptu, kao što je gore navedeno, provodi se kao sa svojstvima objekata.

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

Kao prvi primjer, razmotrite sljedeći HTML element:

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

Na temelju njega ćemo analizirati kako dobiti DOM svojstva, promijeniti ih i dodati nova.

Čitanje vrijednosti DOM svojstva:

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

Promjena vrijednosti DOM svojstva:

// da promijenite vrijednost svojstva DOM-a, trebate mu samo dodijeliti novu vrijednost alert.title = "New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Dodavanje DOM svojstava:

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

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

Promjenjivi odlomci = document.querySelectorAll("p"); za (var i = 0, duljina = odlomci. duljina ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Primjer u kojem postavljamo svojstvo lang na sve elemente s klasom sadržaja s vrijednošću "ru":

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

Atributi elemenata i metode za rad s njima

Atributi su inicijalno postavljeni u HTML kodu. Iako su na neki način povezani sa svojstvima, oni nisu ista stvar. U većini slučajeva trebali biste raditi sa svojstvima i pristupati atributima samo kada su vam stvarno potrebni.

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

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

• .hasAttribute("attribute_name") – provjerava ima li element navedeni atribut. Ako element ima atribut koji se provjerava, tada ovu metodu vraća true, inače false.
• .getAttribute("attribute_name") – dobiva vrijednost atributa. Ako element nema navedeni atribut, tada ova metoda vraća prazan niz ("") ili null.
• .setAttribute("attribute_name", "attribute_value") – postavlja navedeni atribut s navedenom vrijednošću na element. Ako element ima navedeni atribut, tada će ova metoda jednostavno promijeniti njegovu vrijednost.
• .removeAttribute("attribute_name") - uklanja navedeni atribut iz elementa.

Pogledajmo primjere.

Vrlo zanimljiv primjer s atributom value.

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

Uzmimo vrijednost atributa value i vrijednost DOM svojstva:

// dobivanje vrijednosti atributa value elementa name.getAttribute("value"); // "Bob" // dobivanje vrijednosti DOM svojstva name.value; // "Bob" // ažuriraj vrijednost atributa value, postavi ga na novu vrijednost name.setAttribute("value", "Tom"); // "Tom" // dobivanje vrijednosti DOM svojstva name.value; // "Tom"

Ovaj primjer pokazuje da kada se atribut vrijednosti promijeni, preglednik automatski u skladu s tim mijenja svojstvo DOM vrijednosti.

Sada učinimo suprotno, naime, promijenimo vrijednost svojstva DOM i provjerimo mijenja li se vrijednost atributa:

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

Ovaj primjer pokazuje da promjena svojstva DOM-a ne dovodi uvijek do odgovarajuće promjene atributa. Oni. u ovom slučaju, promjena vrijednosti svojstva DOM 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 izvornu vrijednost ili onu koju smo postavili, na primjer, metodom setAttribute.

Ovaj primjer pokazuje da je ispravnije uvijek raditi s DOM svojstvima, a atributu trebate pristupiti samo kada je to stvarno potrebno.

Čak i u slučaju kada trebate dobiti početnu vrijednost koju postavljamo 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 s href atributom

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

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // stranica2.html stranica2.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 svojstvo DOM je puni URL. Tu razliku diktira standard da preglednik mora razlučiti href vrijednost u puni URL.

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

Na kraju, pogledajmo odabrani atribut.

Primjer s odabranim atributom

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

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

Primjer koji pokazuje kako možete dobiti odabrane vrijednosti opcija u odabranom elementu:

bez ocjene 1 2 3 4 5 // dobivanje elementa odabira var mark = document.querySelector("#mark"); // Metoda 1 (stvaranjem niza i njegovim ispunjavanjem vrijednostima odabranih opcija) var arr = ; za (var i = 0, duljina = 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 s atributima (svojstvo atributa)

U JavaScriptu svaki element ima svojstvo atributa, koje se može koristiti za dohvaćanje svih njegovih atributa kao NamedNodeMap objekta.

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

Atributu u ovoj zbirci pristupa se njegovim indeksom ili korištenjem metode stavke. Atributi u ovoj zbirci broje se od 0.

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

VOLIM JAVASCRIPT

// dohvaćanje elementa prema njegovom identifikatoru message var message = document.querySelector("#message"); // dobivanje njegovih atributa var attrs = message.attributes; // prođite kroz sve atribute pomoću petlje (attrs.length – broj atributa) za (var i = 0, length = 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, tada će rezultat 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 mora proslijediti naziv atributa kao parametar. Stvorenom atributu tada se 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

// dohvaćanje elementa prema njegovom identifikatoru message var message = document.querySelector("#message"); // dobivanje njegovih atributa var attrs = message.attributes; // Zadatak br. 1. Dobijte vrijednost atributa id console.log(attrs.getNamedItem("id")); // Zadatak br. 2. Postavite atribut (ako postoji, promijenite mu vrijednost, inače dodajte novi) // kreirajte atribut stila i spremite ga u varijablu attrStyle var attrStyle = document.createAttribute("style"); // dodijelite vrijednost atributu pomoću svojstva vrijednosti 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 ga nemaju. Postavite vrijednost atributa jednaku vrijednosti atributa alt.