Lekcija bo zajemala začetek teme: dokumentni objektni model (javaScript DOM) je osnova dinamičnega HTML-ja, preučene bodo metode dostopa do objektov in obravnavane bodo metode obdelave dogodkov javascript.

• Na splošno je predmet sestavljen tip podatkov, ki združuje veliko vrednosti v skupno enoto in omogoča shranjevanje in pridobivanje vrednosti po njihovih imenih na zahtevo.

Prej smo se že začeli seznanjati s konceptom v javascriptu.

• V javascriptu je DOM - Objektni model dokumenta— objektni model spletne strani (html stran).
• Oznake dokumenta ali, kot pravijo tudi, dokumentna vozlišča so njegovi predmeti.

Poglejmo diagram hierarhija objektov v JavaScriptu in kje v hierarhiji se nahaja objekt dokumenta, o katerem razpravljamo v tej temi.

Element skripta ima naslednje atribute:

odloži (čaka, da se stran popolnoma naloži).

primer:

/* Omogoča vzporedno nalaganje datotek js in izvajanje takoj po nalaganju, ne da bi čakali na obdelavo preostale strani */ /* Omogoča brskalniku, da začne vzporedno nalagati datoteke js, ne da bi ustavil nadaljnjo obdelavo strani. Njihova izvedba se izvede po popolnem razčlenjevanju objektnega modela dokumenta */

Lastnosti in atributi objekta dokumenta v JavaScriptu

Objekt dokumenta predstavlja spletno stran.

Pomembno: Za dostop do lastnosti in metod predmeta v javaScriptu, kot pri delu z drugimi predmeti, se uporablja zapis s pikami:

tiste. najprej se napiše sam objekt, nato se s piko in brez presledkov navede njegova lastnost, atribut ali metoda

object.property object.attribute object.method()

Poglejmo primer:

Primer: naj bo oznaka v dokumentu html

Moj element

in specifično zanj slog css(tudi dva sloga, drugi bo uporaben za nalogo):

.small( barva : rdeča ; velikost pisave : majhna ; ) .big ( barva : modra ; velikost pisave : velika; )

.small( barva: rdeča; velikost pisave: majhna; ) .velika ( barva: modra; velikost pisave: velika; )

Potrebno:

nastavite novo lastnost predmeta, mu dodelite vrednost in to vrednost prikažete;

prikaz vrednosti atributa predmeta;

spremenite vrednost atributa predmeta.

Nalogo opravimo po vrsti:
✍ Rešitev:

Od tega jezik javascript, potem lahko predmet izmislimo in mu dodelimo katero koli lastnost s poljubno vrednostjo. Toda najprej pridobimo dostop do predmeta (o dostopu do predmeta bomo podrobneje razpravljali pozneje v tej lekciji):

// dostop do predmeta po njegovem id-ju var element = document.getElementById("MyElem"); element.myProperty = 5; // dodelite lastnost alert(element.myProperty); // prikaz v pogovornem oknu

Naslednja naloga je povezana z atributom predmeta. Atribut predmeta je atribut oznake. Tisti. v našem primeru sta dva: atribut class z vrednostjo small in atribut id. Delali bomo z atributom razreda.

Zdaj pa dodamo kodo javascript za prikaz vrednosti atributa našega objekta. Koda mora biti po glavne oznake:

// dostop do predmeta po njegovem id-ju var element = document.getElementById("MyElem"); opozorilo(element.getAttribute("razred")); // prikaz v pogovornem oknu

In zadnja naloga: spreminjanje vrednosti atributa. Imamo slog za to. "velik". Zamenjajmo vrednost atributa razreda s tem slogom:

// dostop do predmeta po njegovem id-ju var element = document.getElementById("MyElem"); element.setAttribute("razred","velik");

Posledično bo naš element postal večji in obarvan modro (veliki razred).

Zdaj pa si podrobneje oglejmo metode, uporabljene v primeru za delo z atributi.

Metode za delo z atributi v JavaScriptu

Atribute lahko dodajate, brišete in spreminjate. Za to obstajajo posebne metode:

• Dodajanje atributa (nastavitev nove vrednosti zanj):

getAttribute(attr)

• Preverjanje prisotnosti tega atributa:

removeAttribute(attr)

Različni načini dela z atributi

Primer: Natisnite vrednost atributa vrednosti besedilnega bloka.

✍ Rešitev:

• Naj bo besedilni blok:

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

• Oglejmo si več načinov za pridobivanje vrednosti atributa (za izhod uporabite metodo alert()):

elem.getAttribute("vrednost")

elem.getAttribute("vrednost")

2. zapis pike:

elem.attributes.value

elem.attributes.value

3. zapis v oklepaju:

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


Vrednosti atributov lahko nastavite tudi na več načinov:

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

Lastnosti elementov telesa

Preko objekta dokumenta lahko dostopate do telesa dokumenta - oznake telesa - z nekaterimi uporabnimi lastnostmi.

Na primer, oznaka body ima dve lastnosti: širino in višino odjemalskega okna:

document.body.clientHeight — višina odjemalskega okna
document.body.clientWidth — širina odjemalskega okna


Najpomembneje pa je, kot smo že izvedeli, da je prek predmeta dokumenta s posebnimi metodami zagotovljen dostop do vseh elementov strani, to je oznak.

Pomembno: Pri dostopu do oznak strani na ta način mora biti skript na koncu drevesa elementov, preden zapre telo! Ker naj bi do trenutka, ko se skript izvede, vse elemente brskalnik že »narisal« na zaslonu

Delo js8_1. Prikaži sporočilo o velikosti okna brskalnika: npr. “dimenzije okna brskalnika 600 x 400”

Dostop do elementov dokumenta v JavaScriptu

Obstaja več možnosti za dostop ali iskanje predmetov:

Iskanje po ID-ju (ali metodi getElementById) vrne določen element

Iskanje po imenu oznake (ali metodi getElementsByTagName) vrne niz elementov

Iskanje po atributu imena (ali metodi getElementsByName) vrne niz elementov

Prek nadrejenih elementov (pridobivanje vseh otrok)

Razmislimo o vsaki od možnosti podrobneje.

Dostop do elementa prek njegovega atributa id

Sintaksa: document.getElementById(id)

Metoda getElementById() vrne sam element, ki ga je nato mogoče uporabiti za dostop do podatkov

Primer: stran ima besedilno polje z atributom id="cake":

...

Nujno

✍ Rešitev:

opozorilo(document.getElementById("torta").vrednost); // vrne "število tort"

Enako lahko storite tako, da do predmeta dostopate prek spremenljivke:

var a=document.getElementById("torta"); opozorilo(a.vrednost); // prikaže vrednost atributa vrednosti, tj. besedilo "število tort"

Pomembno: Skript se mora nahajati za oznako!

Dostop do matrike elementov prek imenske oznake in prek indeksa matrike

Sintaksa:
document.getElementsByTagName(ime);

Primer: stran ima besedilno polje (vnosno oznako) z atributom vrednosti:

...

Zahtevano: prikaži vrednost njegovega atributa vrednosti

Metoda getElementsByTagName omogoča dostop prek spremenljivke do vseh vhodnih elementov (tj. niza vhodnih elementov), ​​tudi če je ta element edini na strani. Za dostop do določenega elementa, na primer prvega, označimo njegov indeks (matrika se začne pri indeksu nič).

✍ Rešitev:

Do določenega elementa dostopamo z indeksom:

var a =document.getElementsByTagName("input"); opozorilo(a.vrednost); // vrne "število tort"

Dostop do matrike elementov z vrednostjo atributa name

Sintaksa:
document.getElementsByName(ime);

Metoda getElementsByName("...") vrne matriko predmetov, katerih atribut imena je enak vrednosti, podani kot parameter metode. Če je na strani samo en tak element, potem metoda še vedno vrne matriko (samo z enim samim elementom).

Primer: recimo, da je v dokumentu element:

var element = document.getElementsByName("MyElem"); opozorilo(element.vrednost);

IN v tem primeru obstaja samo en element, vendar je dostop omogočen do ničelnega elementa matrike.

Pomembno: Metoda deluje samo s tistimi elementi, za katere je atribut name izrecno naveden v specifikaciji: to so form , input , a , select , textarea in številni drugi, bolj redki, oznake.

Metoda document.getElementsByName ne bo delovala z drugimi elementi, kot so div, p itd.

Dostopanje do potomcev nadrejenega elementa

Do otrok dostopate v javascriptu prek lastnosti childNodes. Lastnost pripada nadrejenemu objektu.

document.getElementById(roditel).childNodes;

document.getElementById(roditel).childNodes;

Oglejmo si primer, kjer so slikovne oznake postavljene v vsebnik, imenovan oznaka div. Tako je oznaka div nadrejena slikovnim podatkom, same oznake img pa so v skladu s tem otroci oznake div:

Zdaj pa izhod v modalno okno vrednosti elementov polja s potomci, tj. img oznake:

var myDiv=document.getElementById("div_for_img"); // dostop do nadrejenega vsebnika var childMas=myDiv.childNodes; // niz potomcev za (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Upoštevajte, da je priročno uporabiti zanko za ponavljanje elementov matrike potomcev. Tisti. v našem primeru dobimo cikel:

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

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

Drugi načini dostopa do elementov

Oglejmo si druge metode na primeru:

1 3 4

1 3 4

Dostop:

... // nezaželeni in opuščeni dostopniki elementov: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // besedilno opozorilo(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 opozorilo(document.f .b .type) ; // opozorilo gumba (document.f .s .name ) ; // ss opozorilo(document.f .s .options [ 1 ] .id ) ; // o2 // prednostne metode za dostop do elementov alert(document.getElementById ("t" ) .type ) ; // besedilno opozorilo(document.getElementById ("s" ) .name ) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 opozorilo (document.getElementById ("o3" ) .text ) ; // 4 ...

... // neželene in zastarele metode dostopa do elementov: alert(document.forms.name); // f opozorilo(document.forms.elements.type); // besedilno opozorilo (document.forms.elements.options.id); // o2 opozorilo (document.f.b.type); // gumb opozorilo(document.f.s.name); // ss opozorilo (document.f.s.options.id); // o2 // prednostne metode za dostop do elementov alert(document.getElementById("t").type); // besedilno opozorilo(document.getElementById("s").name); // ss opozorilo(document.getElementById("s").options.id); // 02 opozorilo(document.getElementById("o3").text); // 4 ...

Primer: v dokumentu HTML ustvarite gumb in besedilno polje. S skriptom pobarvaj ozadje gumba (lastnost gumba style.backgroundColor) in prikaži napis "Zdravo!" v besedilnem polju (atribut vrednosti).

koda HTML:

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

Možnost 2:

document.getElementById ("t1" ) .setAttribute ( "value" , ​​​​"Pozdravljeni!" ) ; document.getElementById("b1" ) .style .backgroundColor = "rdeča" ;

document.getElementById("t1").setAttribute("value","Pozdravljeni!"); document.getElementById("b1").style.backgroundColor = "rdeča";

Naloga Js8_2. Ustvarite oznake besedilnih polj, kot je prikazano na sliki. Podajte jim ustrezne (prikazane na sliki) vrednosti atributa id. S pomočjo skripta dodajte vrednost »0« vsem številskim poljem (ob predpostavki številskih vrednosti)

Preverjanje pravilnosti vnosa podatkov v obrazec

Je polje ostalo prazno?

Uporabniškim vnosom ni mogoče zaupati. Nerazumno je domnevati, da bodo uporabniki preverjali podatke pri vnosu podatkov. To pomeni, da morate za to uporabiti javascript.

Če želite preveriti, ali je besedilno polje ostalo prazno (na primer, ko je uporabnik izpolnil podatke nekega obrazca), se morate obrniti na lastnost vrednosti. Če je vrednost nepremičnine prazna vrstica(""), kar pomeni, da je treba o tem nekako obvestiti uporabnika.

if(document.getElementById("name").value=="") (nekatera dejanja, na primer prikaz sporočila, ki zahteva, da izpolnite polje);

Poleg tega lahko storite brez skripta. Pri vhodni oznaki besedilno polje obstaja atribut vzorca. njegova vrednost je navedena vsakdanje izražanje za preverjanje podatkov v danem besedilnem polju obrazca. Če je atribut prisoten vzorec, obrazec ne bo oddan, dokler to besedilno polje ni pravilno izpolnjeno.
Če želite na primer preveriti, ali je polje prazno:

Namesto tega pošljite besedilo številčna vrednost: funkcija jeNaN

Če polje zahteva vnos številske vrednosti, vendar namesto tega uporabnik vnese besedilo, je treba uporabiti funkcijo isNaN. "ni številka?"), ki preveri vrsto vhodnih podatkov in vrne true, če so namesto številskih podatkov vneseni besedilni podatki.

to. če je vrnjeno true, mora biti uporabnik obveščen, da vnese pravilno obliko, tj. število.

if(isNaN(document.getElementById("minutes").value))( opozorilo, ki zahteva vnos številskih podatkov);

Glede na stran z elementi za izpolnitev:


Drobec html kodo:

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

ime: Število krofov: minute: Povzetek: davek: rezultat: ...

ime:
Število krofov:
minute:
Povzetek:
davek:
rezultat:
...

Potrebno:
Izpolnite prazna polja v spodnjem delčku kode, ki preverja, ali sta dve besedilni polji pravilno izpolnjeni: Ime(id="ime") in minut(id="minute"). S potrditvami zagotovite, da je polje prazno ("") in da je številsko polje pravilno izpolnjeno (isNaN).

* Nalogo izvedite tudi z atributom vzorca besedilnih polj z uporabo .

Delček skripta:

Koda uporablja predhodno naučene pogoje za izdelavo kompleksnih pogojev.

Nov koncept za vas je klicanje funkcije kot upravljalnik dogodkov gumba:
onclick="placeOrder();"
Ko kliknete gumb, se prikliče funkcija placeOrder().

Ustvarite lahko po meri zavezujoča vezava, ki bo preveril vrednost določene opazovane logične vrednosti, preden doda ali ne doda atribute. Glej ta primer:

Ko.bindingHandlers.attrIf = ( posodobitev: 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); ) ) ) )); povezava

Želim si, da bi odgovoril na @gbs, a ne morem. Moja rešitev bi bila, da bi imela dva enaka element HTML: eden z atributom, brez njega in izločilni pogoj za dodajanje enega od njih glede na element. Zavedam se tudi tega splošnega pričakovanja, toda katera rešitev je učinkovitejša?

Ta vadnica govori o branju in spreminjanju atributov elementov v jQuery.

Atributi so pari ime/vrednost, ki so dodeljeni elementom v oznaki. Primeri atributov ( href, naslov, src, razred):

Tukaj je besedilo povzetka

• attr() za branje, dodajanje in spreminjanje atributov
• removeAttr() za odstranitev atributov

Ta lekcija pokriva delo z metodama attr() in removeAttr().

Obstajajo posebne metode jQuery za delo z razredi CSS, ki so opisane v drugi lekciji. Ko delate na projektu v jQueryju, morate veliko manipulirati z razredi CSS, atribut razreda pa lahko vsebuje več imen razredov, zaradi česar je delo z njim veliko bolj zapleteno kot z drugimi atributi.

Če boste delali z vrednostmi vnosnih polj, potem je bolje uporabiti metodo val(), ki ne zagotavlja le poenostavljenega načina dela z atributom vrednosti, ampak lahko tudi bere in nastavlja vrednosti v izbranih elementih izbirnega seznama.

Branje vrednosti atributa

Branje vrednosti atributa elementa je preprosto. Poklicati morate le metodo attr() na objektu jQuery, ki vsebuje element, in ji posredovati ime atributa za branje. Metoda vrne vrednost atributa:

// Natisni vrednost atributa "href" opozorila elementa #myLink ($("a#myLink").attr("href"));

Če vaš predmet jQuery vsebuje več elementov, metoda attr() prebere vrednosti atributov samo za prvi element v nizu.

Nastavitev vrednosti atributov

Metodo attr() lahko uporabite tudi za dodajanje ali spreminjanje vrednosti atributov:

• Če atribut ne obstaja v elementu, bo dodano in dodeljena mu bo navedena vrednost.
• Če atribut že obstaja, bo njegova vrednost posodobljeno dano vrednost.

Metodo attr() lahko uporabite na tri načine za dodajanje ali spreminjanje atributov:

Dodate/spremenite lahko atribute za kateri koli element (ali niz elementov).

Za en element (ali elemente) lahko dodate/spremenite več atributov hkrati, tako da podate zemljevid imen in vrednosti atributov.

lahko dinamično dodate/spremenite en atribut za več elementov s funkcijo povratnega klica.

Nastavite en atribut

Če želite nastaviti ali spremeniti atribut elementa, morate poklicati metodo attr() in navesti ime in vrednost atributa. Na primer:

// Spremenite vrednost atributa "href" elementa #myLink na vrednost "http://www.example.com/" // (če atribut "href" ne obstaja, bo ustvarjen samodejno) $("a#myLink"). attr("href", "http://www.example.com/");

Možno je tudi nastaviti isti atribut za več elementov:

Nastavitev več atributov z uporabo zemljevida

Z zemljevidom lahko na enem ali več elementih nastavite več atributov hkrati. To je seznam parov ime/vrednost, ki je videti takole:

( ime1: vrednost1, ime2: vrednost2, ... )

Naslednji primer nastavi dva atributa na elementu img hkrati:

// Nastavite atributa "src" in "alt" za element img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Moja fotografija" )) ;

Nastavite lahko tudi atribute za več elementov:

// Nastavite atributa "src" in "alt" za vse elemente img $("img").attr(( "src": "mypic.jpg", "alt": "Moja fotografija" ));

Nastavitev atributov s funkcijo povratnega klica

Namesto posredovanja vrednosti atributa metodi attr(), lahko posredujete ime funkcije povratnega klica. Na ta način lahko dinamično nastavite vrednosti atributov za več elementov na podlagi položaja elementa, obstoječe vrednosti atributa ali drugih lastnosti.

Funkcija return mora sprejeti dva argumenta:

• Indeks položaja trenutno izbranega elementa v nizu (začne se pri nič)
• stara vrednost atributa za trenutno izbrani element

Vrednost, ki jo vrne funkcija, se uporabi za zamenjavo vrednosti atributa.

Poleg trenutnega položaja elementa in stare vrednosti atributa lahko vaša funkcija s ključem dostopa do samega elementa besede to. Na ta način lahko dostopate do katere koli lastnosti elementa ali metode iz funkcije povratnega klica.

Primer uporablja funkcijo povratnega klica za dodajanje atributa alt vsaki sliki na strani glede na položaj slike in njen atribut src:

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

Po zagonu kode bo imela prva slika atribut alt z vrednostjo "Figure 1: myphoto.jpg", druga slika pa bo imela atribut alt z vrednostjo "Figure 2: yourphoto.jpg".

Odstranjevanje atributa

Če želite odstraniti atribut iz elementa, morate poklicati metodo removeAttr() in ji posredovati ime atributa, ki ga želite odstraniti. Na primer:

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

Metodo removeAttr() lahko pokličete tudi za predmet jQuery, ki vsebuje več elementov. Metoda removeAttr() bo odstranila navedeni atribut iz vseh elementov:

// Odstrani atribut "title" iz vseh povezav $("a").removeAttr("title");

Povzetek

Ta lekcija je pokrivala vprašanja dela z atributi elementov v jQuery:

• Branje vrednosti atributov
• Nastavitev enega atributa
• Nastavitev več različnih atributov hkrati
• Uporaba funkcije povratnega klica za dinamično nastavitev vrednosti atributov na nizu elementov
• Odstranjevanje atributov iz elementa

Nastavi vrednost atributa podanemu elementu. Če atribut že obstaja, se vrednost posodobi; sicer se doda nov atribut s podanim imenom in vrednostjo.

Sintaksa Element.setAttribute( ime, vrednost); Ime parametrov DOMString, ki določa ime atributa, katerega vrednost je treba nastaviti. Ime atributa se samodejno pretvori v vse male črke, ko je setAttribute() poklican na element HTML v dokumentu HTML. vrednost DOMString, ki vsebuje vrednost za dodelitev atributu. Vsaka navedena vrednost, ki ni niz, se samodejno pretvori v niz.

Logični atributi se štejejo za resnične, če so sploh prisotni v elementu, ne glede na njihovo dejansko vrednost; praviloma bi morali podati prazen niz ("") v vrednosti (nekateri uporabljajo ime atributa; to deluje, vendar je nestandardno). Oglejte si spodnji prikaz za praktično predstavitev.

Ker se podana vrednost pretvori v niz, navedba null ne naredi nujno tistega, kar pričakujete. Namesto da bi odstranili atribut ali nastavili njegovo vrednost na null, namesto tega nastavi vrednost atributa na niz "null". Če želite odstraniti atribut, pokličite removeAttribute().

Vrnjena vrednost Izjeme InvalidCharacterError Podano ime atributa vsebuje enega ali več znakov, ki v imenih atributov niso veljavni. Primer

V naslednjem primeru se setAttribute() uporablja za nastavitev atributov na .

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

To dokazuje dve stvari:

• Prvi klic funkcije setAttribute() zgoraj prikazuje spremembo vrednosti atributa imena v "helloButton". To lahko vidite z inšpektorjem strani svojega brskalnika (Chrome, Edge, Firefox, Safari).
• Če želite nastaviti vrednost logičnega atributa, kot je onemogočeno, lahko podate katero koli vrednost. Prazen niz ali ime atributa sta priporočeni vrednosti. Vse, kar je pomembno, je, da če je atribut sploh prisoten, ne glede na njeno dejansko vrednost, se njegova vrednost šteje za resnično. Odsotnost atributa pomeni, da je njegova vrednost napačna. Če vrednost atributa disabled nastavimo na prazen niz (""), disabled nastavimo na true , zaradi česar je gumb onemogočen.

Metode DOM, ki obravnavajo atribute elementa:

Ne poznajo imenskega prostora, najpogosteje uporabljene metode Različice, ki poznajo imenski prostor (2. stopnja DOM) Metode DOM ravni 1 za neposredno obravnavo vozlišč Attr (redko uporabljene) Metode DOM ravni 2, ki poznajo imenski prostor za neposredno obravnavo vozlišč Attr (redko uporabljene)

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

Specifikacija

• Jedro ravni 2 DOM: setAttribute (uvedeno v jedro ravni 1 DOM)

Združljivost brskalnika

Tabela združljivosti na tej strani je ustvarjena iz strukturiranih podatkov. Če želite prispevati k podatkom, obiščite https://github.com/mdn/browser-compat-data in nam pošljite zahtevo za vleko.

Posodobite podatke o združljivosti na GitHub

Namizni mobilni telefon Chrome Edge Firefox internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS Samsung InternetsetAttribute

Popolna podpora za Chrome Da	Edge Popolna podpora 12	Popolna podpora za Firefox Da	IE Popolna podpora 5 Opombe Popolna podpora 5 Opombe Opombe V Internet Explorerju 7 in starejših različicah setAttribute ne nastavi slogov in odstrani dogodke, ko jih poskušate nastaviti.	Opera Popolna podpora Da	Safari Popolna podpora 6	WebView Android Polna podpora Da	Popolna podpora za Chrome Android Da	Firefox Android Polna podpora Da	Opera Android Polna podpora Da	Safari iOS Popolna podpora Da	Samsung Internet Android Polna podpora Da

Legenda Popolna podpora Popolna podpora Glejte opombe o izvedbi. Glej opombe o izvedbi. Gecko ugotavlja

Uporaba funkcije setAttribute() za spreminjanje določenih atributov, predvsem vrednosti v XUL, deluje nedosledno, saj atribut določa privzeto vrednost. Za dostop ali spreminjanje trenutnih vrednosti uporabite lastnosti. Uporabite na primer Element.value namesto Element.setAttribute() .

V tem članku se bomo seznanili z lastnostmi in atributi DOM, razmislili, v čem se razlikujejo in kako z njimi pravilno delati. Poglejmo, katere metode ima JavaScript za izvajanje operacij z atributi.

Kakšna je razlika med atributom in lastnostjo DOM?

Atributi so entitete HTML, s katerimi lahko elementom v kodi HTML dodamo določene podatke.

Ko brskalnik zahteva stran, prejme njeno izvorno kodo HTML. Nato to kodo razčleni in na njeni podlagi zgradi DOM. Med tem postopkom se atributi HTML elementov prevedejo v ustrezne lastnosti DOM.

Na primer, brskalnik, ko bere naslednjo vrstico kode HTML, ustvari naslednje lastnosti DOM za ta element: id, className, src in alt.

Do teh lastnosti lahko dostopate v kodi JavaScript kot lastnosti predmeta. Predmet tukaj je vozlišče DOM (element).

Primer, v katerem dobimo vrednosti lastnosti DOM za zgoraj navedeni element in izpišemo njihove vrednosti v konzolo:

// pridobite element var brandImg = document.querySelector("#brand"); // prikaži vrednosti lastnosti DOM elementa na konzoli console.log(brandImg.id); // "blagovna znamka" console.log(brandImg.className); // "blagovna znamka" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "logo spletnega mesta"

Nekatera imena lastnosti DOM se ne ujemajo z imeni atributov. Eden od teh je atribut razreda. Ta atribut ustreza lastnosti DOM className. Ta razlika je posledica dejstva, da je razred ključna beseda v JavaScriptu je rezerviran in ga ni mogoče uporabiti. Zaradi tega so se razvijalci standarda odločili uporabiti drugo ime za skladnost, ki je bilo izbrano kot ime razreda.

Druga niansa je povezana z dejstvom, da je prevod atributov HTML, določen v izvorna koda dokumenta, lastnosti DOM niso vedno implementirane ena proti ena.

Če ima element nestandardni atribut HTML, se lastnost, ki mu ustreza v DOM, ne ustvari.

// pridobi element mydiv = document.querySelector("#mydiv"); // pridobi vrednost lastnosti alt elementa in jo izpiše na konzolo console.log(mydiv.alt); // nedefinirano // pridobi vrednost alt atributa elementa in jo izpiše v konzolo console.log(mydiv.getAttribute("alt")); // "..."

Druga razlika je, da so vrednosti določenih atributov HTML in njihovih ustreznih lastnosti DOM lahko različne. Tisti. atribut ima lahko eno vrednost, lastnost DOM, ustvarjena na njegovi podlagi, pa drugo.

Eden od teh atributov je preverjen.

Vrednost preverjenega atributa HTML je v tem primeru prazen niz. Toda lastnost, ki ustreza danemu atributu v DOM, bo imela prav. Ker v skladu s pravili standarda je za nastavitev true dovolj le omeniti ta atribut v kodi HTML in ni pomembno, kakšno vrednost bo imel.

Še več, tudi če v kodi HTML ne podamo atributa checked za vhodni element s potrditvenim poljem type, bo zanj še vedno ustvarjena lastnost checked v DOM, vendar bo enaka false.

Poleg tega vam JavaScript omogoča tudi delo z atributi. Za to obstajajo posebne metode v API-ju DOM. Vendar je priporočljivo, da jih uporabljate le, če res potrebujete delo s podatki na ta način.

Ob tem morate vedeti, da ko elementu spremenimo lastnost DOM, se spremeni tudi pripadajoči atribut in obratno. Toda ta postopek v brskalnikih se ne izvaja vedno ena proti ena.

Glavne razlike med lastnostmi in atributi DOM so:

• vrednost atributa je vedno niz, vrednost lastnosti DOM pa določen podatkovni tip (ni nujno niz);
• Ime atributa ne razlikuje med velikimi in malimi črkami, lastnosti DOM pa ne razlikujejo med velikimi in malimi črkami. Tisti. v kodi HTML lahko na primer zapišemo atribut id HTML kot Id , ID itd. Enako velja za ime atributa, ki ga določimo v posebnih JavaScript metodah za delo z njim. Toda do ustrezne lastnosti DOM lahko dostopamo samo z ID-jem in nič drugega.

Delo z lastnostmi DOM elementa

Delo z lastnostmi elementov v JavaScriptu, kot je navedeno zgoraj, poteka kot z lastnostmi predmetov.

Toda za dostop do lastnosti elementa jo je treba najprej pridobiti. Element DOM lahko dobite v JavaScriptu, na primer z uporabo univerzalne metode querySelector in zbirke elementi DOM, na primer prek querySelectorAll.

Kot prvi primer razmislite o naslednjem elementu HTML:

Besedilo informacijskega sporočila... var alert = document.querySelector("#alert"); // pridobi element

Na njegovi podlagi bomo analizirali, kako pridobiti DOM lastnosti, jih spremeniti in dodati nove.

Branje vrednosti lastnosti DOM:

// pridobi vrednost id lastnosti DOM var alertId = alert.id; // "opozorilo" // pridobi vrednost lastnosti DOM className var alertClass = alert.className; // "opozorilo o opozorilu-info" // pridobi vrednost naslova lastnosti DOM var alertId = alert.title; // "Besedilo pomoči ..."

Spreminjanje vrednosti lastnosti DOM:

// če želite spremeniti vrednost lastnosti DOM, ji morate samo dodeliti novo vrednost alert.title = "Novo besedilo orodnega opisa"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Dodajanje lastnosti DOM:

Alert.lang = "ru"; // nastavite lastnost lang na "ru" alert.dir = "ltr"; // nastavi lastnost dir na "ltr"

Primer, v katerem bomo na konzolo izpisali vse vrednosti razreda, ki jih imajo elementi p na strani:

Spremembe odstavkov = document.querySelectorAll("p"); za (var i = 0, dolžina = odstavki.dolžina; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Primer, v katerem nastavimo lastnost lang vsem elementom z razredom vsebine z vrednostjo »ru«:

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

Atributi elementov in metode za delo z njimi

Atributi so prvotno nastavljeni v kodi HTML. Čeprav so na nek način povezani z lastnostmi, niso ista stvar. V večini primerov bi morali delati z lastnostmi in dostopati do atributov le, ko jih res potrebujete.

Vrednosti atributov so za razliko od lastnosti DOM, kot je navedeno zgoraj, vedno niz.

JavaScript ima štiri metode za izvajanje operacij, povezanih z atributi:

• .hasAttribute("attribute_name") – preveri, ali ima element navedeni atribut. Če ima element atribut, ki se preverja, potem ta metoda vrne true, sicer false.
• .getAttribute("attribute_name") – pridobi vrednost atributa. Če element nima navedenega atributa, potem ta metoda vrne prazen niz ("") ali nič.
• .setAttribute("attribute_name", "attribute_value") – nastavi navedeni atribut s podano vrednostjo elementu. Če ima element navedeni atribut, bo ta metoda preprosto spremenila njegovo vrednost.
• .removeAttribute("ime_atributa") - odstrani navedeni atribut iz elementa.

Poglejmo si primere.

Zelo zanimiv primer z atributom vrednosti.

Primer z atributom vrednosti var name = document.querySelector("input"); // pridobi element

Pridobimo vrednost atributa vrednosti in vrednost lastnosti DOM:

// pridobi vrednost atributa vrednosti elementa name.getAttribute("value"); // "Bob" // pridobi vrednost vrednosti lastnosti DOM name.value; // "Bob" // posodobi vrednost atributa vrednosti, jo nastavi na novo vrednost name.setAttribute("value", "Tom"); // "Tom" // pridobi vrednost vrednosti lastnosti DOM name.value; // "Tom"

Ta primer kaže, da ko se atribut vrednosti spremeni, brskalnik ustrezno samodejno spremeni vrednost lastnosti DOM.

Zdaj pa naredimo nasprotno, in sicer spremenimo vrednost lastnosti DOM in preverimo, ali se spremeni vrednost atributa:

// nastavi novo vrednost za vrednost lastnosti DOM name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Ta primer kaže, da spreminjanje lastnosti DOM ne vodi vedno do ustrezne spremembe atributa. Tisti. v tem primeru sprememba vrednosti lastnosti DOM ne spremeni njenega ustreznega atributa.

Enako se bo zgodilo, ko uporabnik vnese besedilo v to polje. Vrednost lastnosti DOM bo vsebovala dejansko vrednost, ustrezen atribut pa originalno vrednost ali tisto, ki smo jo nastavili, na primer z metodo setAttribute.

Ta primer kaže, da je pravilneje vedno delati z lastnostmi DOM, do atributa pa morate dostopati le, ko je to res potrebno.

Tudi v primeru, ko morate pridobiti začetno vrednost, ki smo jo nastavili v HTML, lahko uporabite lastnost. Lastnost, ki vsebuje začetno vrednost atributa vrednosti, se imenuje defaultValue.

Name.defaultValue; //Tom

Še en zelo zanimiv primer, vendar zdaj z atributom href.

Primer z atributom href

Primer, kjer moramo pridobiti vrednost povezave, kot je bila nastavljena v HTML.

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

V tem primeru atribut href in lastnost href DOM vsebujeta različni vrednosti. Atribut href je tisto, kar nastavimo v kodi, lastnost DOM pa je celoten URL. To razliko narekuje standard, da mora brskalnik vrednost href razrešiti v celoten URL.

Torej, če moramo dobiti tisto, kar je v atributu, potem v tem primeru ne moremo brez metode getAttribute.

Za konec si poglejmo še izbrani atribut.

Primer z izbranim atributom

Primer, ki prikazuje, kako lahko pridobite vrednost izbrane izbirne možnosti:

brez ocene 1 2 3 4 5 // pridobite izbrani element var mark = document.querySelector("#mark"); // 1 način mark.querySelector("option:checked").value; // Metoda 2 mark.value;

Primer, ki prikazuje, kako lahko dobite izbrane vrednosti možnosti v izbranem elementu:

brez ocene 1 2 3 4 5 // pridobite izbrani element var mark = document.querySelector("#mark"); // Metoda 1 (z ustvarjanjem matrike in polnjenjem z vrednostmi izbranih možnosti) var arr = ; for (var i = 0, length = 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 =>option.value)

Drug način za delo z atributi (lastnost atributov)

V JavaScriptu ima vsak element lastnost atributov, ki jo je mogoče uporabiti za pridobitev vseh njegovih atributov kot objekta NamedNodeMap.

Ta metoda lahko uporabite, ko morate na primer ponoviti vse atribute elementa.

Do atributa v tej zbirki lahko dostopate z njegovim indeksom ali z uporabo metode predmeta. Atributi v tej zbirki se štejejo od 0.

Na primer, prikažimo vse atribute določenega elementa na konzoli:

LJUBIM JAVASCRIPT

// pridobi element po identifikatorju message var message = document.querySelector("#message"); // pridobi njegove atribute var attrs = message.attributes; // pojdite skozi vse atribute z uporabo zanke (attrs.length – število atributov) 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;

Poleg tega lahko s to zbirko delate tudi na naslednje načine:

• .getNamedItem("attribute_name") – pridobi vrednost navedenega atributa (če navedeni atribut ni prisoten v elementu, bo rezultat nič).
• .setNamedItem("attribute_node") – doda nov atribut elementu ali posodobi vrednost obstoječega. Če želite ustvariti atribut, morate uporabiti metodo document.createAttribute(), ki ji je treba posredovati ime atributa kot parameter. Ustvarjenemu atributu je treba nato dodeliti vrednost z uporabo lastnosti value.
• .removeNamedItem("ime_atributa") – odstrani navedeni atribut iz elementa (kot rezultat vrne odstranjeni atribut).

Primer dela z atributi prek metod getNamedItem, setNamedItem in removeNamedItem:

LJUBIM JAVASCRIPT

// pridobi element po identifikatorju message var message = document.querySelector("#message"); // pridobi njegove atribute var attrs = message.attributes; // Naloga št. 1. Pridobite vrednost atributa id console.log(attrs.getNamedItem("id")); // Naloga št. 2. Nastavite atribut (če obstaja, spremenite njegovo vrednost, sicer dodajte novega) // ustvarite atribut style in ga shranite v spremenljivko attrStyle var attrStyle = document.createAttribute("style"); // dodeli vrednost atributu z uporabo lastnosti vrednosti attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

Naloge

• Na konzolo natisnite vse elemente dokumenta, ki imajo atribut id.
• Vsem slikam na strani dodajte atribut naslova, če tega atributa nimajo. Nastavite vrednost atributa enako vrednosti atributa alt.