Táto lekcia je o čítaní a zmene atribútov prvkov v jQuery.

Atribúty sú pár názov/hodnota, ktorý je priradený k prvkom v značke. Príklady atribútov ( href, titul, src, trieda):

• attr() na čítanie, pridávanie a zmenu atribútov
• removeAttr() na odstránenie atribútov

Táto lekcia sa zaoberá metódami attr() a removeAttr().

Na prácu s triedami CSS existujú špeciálne metódy jQuery, ktoré sú popísané v inej lekcii . Pri práci na projekte v jQuery často musíte manipulovať s triedami CSS a atribút triedy môže obsahovať niekoľko názvov tried, čo značne sťažuje prácu s inými atribútmi.

Ak sa chystáte pracovať s hodnotami vstupného poľa, je lepšie použiť metódu val(), ktorá poskytuje nielen zjednodušenú verziu atribútu value, ale dokáže aj čítať a nastavovať hodnoty vo vybratých prvkoch vyberte zoznam.

Čítanie hodnoty atribútu

Čítanie hodnoty atribútu prvku je jednoduché. Všetko, čo musíte urobiť, je zavolať metódu attr() na objekte jQuery, ktorý obsahuje prvok, a odovzdať mu názov atribútu na čítanie. Metóda vracia hodnotu atribútu:

// Zobrazenie hodnoty atribútu "href" upozornenia prvku #myLink ($("a#myLink").attr("href"));

Ak váš objekt jQuery obsahuje viacero prvkov, metóda attr() načíta iba hodnoty atribútov pre prvý prvok v množine.

Nastavenie hodnôt atribútov

Metódu attr() možno použiť aj na pridanie alebo zmenu hodnôt atribútov:

• Ak atribút neexistuje v živle bude pridané a bude mu priradená daná hodnota.
• Ak atribút už existuje, jeho hodnota bude aktualizované nastavená hodnota.

Existujú tri spôsoby, ako použiť metódu attr() na pridanie alebo zmenu atribútov:

1. Môžete pridať/zmeniť atribúty pre akýkoľvek prvok (alebo skupinu prvkov).
2. Môžete pridať/zmeniť viacero atribútov naraz pre prvok (alebo prvky) zadaním mapy názvov atribútov a hodnôt.
3. je možné dynamicky pridať/zmeniť jeden atribút pre viacero prvkov pomocou funkcie spätného volania.

Nastavte jeden atribút

Ak chcete nastaviť alebo zmeniť atribút prvku, zavolajte metódu attr() s názvom a hodnotou atribútu. Napríklad:

// Zmeňte hodnotu atribútu „href“ prvku #myLink na „http://www.example.com/“ // (ak atribút „href“ neexistuje, vytvorí sa automaticky) $( "a#myLink"). attr("href", "http://www.example.com/");

Je tiež možné nastaviť rovnaký atribút na viacerých prvkoch:

Nastavenie viacerých atribútov pomocou mapy

Na jednom alebo viacerých prvkoch môžete pomocou mapy nastaviť viacero atribútov súčasne. Je to zoznam párov názov/hodnota, ktorý vyzerá takto:

( meno1: hodnota1, meno2: hodnota2, ... )

Nasledujúci príklad nastavuje dva atribúty pre prvok img súčasne:

// Nastavte atribúty "src" a "alt" pre prvok img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Moja fotografia" )) ;

Môžete tiež nastaviť atribúty pre viacero prvkov:

// Nastavenie atribútov "src" a "alt" pre všetky prvky obrázka $("img").attr(( "src": "mypic.jpg", "alt": "Moja fotografia" ));

Nastavenie atribútov pomocou funkcie spätného volania

Namiesto odovzdávania hodnôt atribútov metóde attr() môžete odovzdať názov funkcie spätného volania. Týmto spôsobom môžete dynamicky nastaviť hodnoty atribútov pre viacero prvkov podľa polohy prvku, existujúcej hodnoty atribútu alebo iných vlastností.

Funkcia return musí mať dva argumenty:

• Index pozície aktuálne vybraného prvku v množine (od nuly)
• starú hodnotu atribútu pre aktuálne vybratý prvok

Návratová hodnota funkcie sa používa na nahradenie hodnoty atribútu.

Okrem aktuálnej pozície prvku a starej hodnoty atribútu môže vaša funkcia pristupovať k samotnému prvku pomocou kľúčového slova this. Týmto spôsobom môžete získať prístup k akejkoľvek vlastnosti alebo metóde prvku z funkcie spätného volania.

Príklad používa spätné volanie na pridanie atribútu alt ku každému obrázku na stránke na základe pozície obrázka a jeho atribútu src:

Po vykonaní kódu bude mať prvý obrázok atribút alt s hodnotou „Picture 1: myphoto.jpg“ a druhý obrázok bude mať atribút alt s hodnotou „Picture 2: yourphoto.jpg“ .

Odstránenie atribútu

Ak chcete odstrániť atribút z prvku, zavolajte metódu removeAttr() a odovzdajte jej názov atribútu, ktorý chcete odstrániť. Napríklad:

// Odstráňte atribút "title" z prvku #myLink $("a#myLink").removeAttr("title");

Môžete tiež zavolať metódu removeAttr() na objekte jQuery, ktorý obsahuje viacero prvkov. Metóda removeAttr() odstráni daný atribút zo všetkých prvkov:

// Odstránenie atribútu "title" zo všetkých odkazov $("a").removeAttr("title");

Zhrnutie

V tomto návode sme sa zaoberali problémami práce s atribútmi prvkov v jQuery:

• Čítanie hodnôt atribútov
• Nastavenie jedného atribútu
• Nastavenie viacerých rôznych atribútov súčasne
• Použitie funkcie spätného volania na dynamické nastavenie hodnôt atribútov v sade prvkov
• Odstránenie atribútov z prvku

Lekcia sa bude týkať začiatku témy: objektový model dokumentu (javascriptový DOM) je základom dynamického HTML, budú sa študovať metódy prístupu k objektom a zvažujú sa spôsoby spracovania javascriptových udalostí

• Vo všeobecnosti objekt je zložený dátový typ, ktorý kombinuje mnoho hodnôt do spoločného modulu a umožňuje ukladať a načítavať hodnoty na požiadanie podľa ich názvov.

Už dávnejšie sme sa začali zoznamovať s konceptom v javascripte.

• V javascripte existuje niečo ako DOM - Objektový model dokumentu- objektový model webovej stránky (html stránka).
• Značky dokumentu alebo, ako sa hovorí, uzly dokumentu sú jeho objektmi.

Pozrime sa na diagram hierarchia objektov v JavaScripte a kde v hierarchii sa nachádza predmetný objekt dokumentu.

Prvok skriptu má atribúty:

odložiť (počkajte, kým sa stránka úplne načíta).

Príklad:

Vlastnosti a atribúty objektu dokumentu v jazyku JavaScript

Objekt dokumentu predstavuje webovú stránku.

Dôležité: Ak chcete získať prístup k vlastnostiam a metódam objektu v jazyku JavaScript, ako pri iných objektoch, používa sa bodkový zápis:

tie. najprv sa zapíše samotný objekt, potom sa jeho vlastnosť, atribút alebo metóda označuje bodkou a bez medzier

object.property object.attribute object.method()

Zvážte príklad:

Príklad: nech má html dokument tag

a špecifické pre neho css štýl(dokonca dva štýly, druhý je užitočný pre zadanie):

Potrebné:

1. nastavte novú vlastnosť objektu, priraďte mu hodnotu a vypíšte túto hodnotu;
2. zobraziť hodnotu atribútu objektu;
3. zmeniť hodnotu atribútu objektu.

Urobme úlohu v poradí:
✍ Riešenie:

Odvtedy jazyk javascript, potom je možné objekt vymyslieť a nastaviť ľubovoľnú vlastnosť s akoukoľvek hodnotou. Najprv však získajme prístup k objektu (o prístupe k objektu sa budeme podrobnejšie venovať neskôr v tejto lekcii):

// získajte prístup k objektu pomocou jeho id var element = document.getElementById("MyElem"); prvok.mojavlastnost = 5; // priradenie vlastnosti alert(element.myProperty); // zobrazenie v dialógovom okne

Ďalšia úloha súvisí s atribútom objektu. Atribút objektu sú atribúty značiek. Tie. v našom prípade sú dva: atribút class s hodnotou small a atribút id. Budeme pracovať s atribútom class.

Teraz pridajme nejaký javascriptový kód na zobrazenie hodnoty atribútu nášho objektu. Kód musí byť po hlavné značky:

// získajte prístup k objektu pomocou jeho id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // zobrazenie v dialógovom okne

A posledná úloha: zmeňte hodnotu atribútu. Na to sme pripravili štýl veľký. Zmeňte hodnotu atribútu class na tento štýl:

// získajte prístup k objektu pomocou jeho id var element = document.getElementById("MyElem"); element.setAttribute("trieda","veľký");

V dôsledku toho sa náš prvok zväčší a zmení sa na modrý (trieda veľký).

Teraz sa pozrime bližšie na metódy použité v príklade na prácu s atribútmi.

Metódy na manipuláciu s atribútmi v JavaScripte

Atribúty je možné pridávať, odstraňovať a meniť. Na to existujú špeciálne metódy:

• Pridanie atribútu (nastavenie novej hodnoty):

getAttribute(attr)

• Kontrola prítomnosti tohto atribútu:

removeAttribute(attr)

Rôzne spôsoby práce s atribútmi

Príklad: Vytlačte hodnotu atribútu hodnoty textového bloku.

✍ Riešenie:

• Nech existuje textový blok:

varelem = document.getElementById("MyElem"); var x = "hodnota";

• Zvážte niekoľko spôsobov, ako získať hodnotu atribútu (pre výstup použite spôsob varovania()):

elem.getAttribute("value" )

elem.getAttribute("value")

2. bodkový zápis:

prvok.atribúty .hodnota

prvok.atribúty.hodnota

3. zápis zátvoriek:


Nastavte hodnoty atribútov Môžete to urobiť aj niekoľkými spôsobmi:

var x = "kľúč"; // kľúč - názov atribútu, hodnota - hodnota atribútu // 1. kľúč elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. kľúč elem.attributes[" "] = "val" // 4. elem.setAttribute(x, "val")

vlastnosti prvkov tela

Prostredníctvom objektu dokumentu môžete získať prístup k telu dokumentu - značke tela - s niektorými jeho užitočnými vlastnosťami.

Napríklad značka tela má dve vlastnosti: šírka a výška klientskeho okna:

document.body.clientHeight - výška okna klienta
document.body.clientWidth - šírka okna klienta


Najdôležitejšia vec, ako sme sa už dozvedeli, je, že prostredníctvom objektu dokumentu sa prostredníctvom špeciálnych metód sprístupňuje všetky prvky stránky, teda značky.

Dôležité: Pri prístupe k značkám stránky, ako je tento, musí byť skript na konci stromu prvkov pred záverečným telom ! Pretože v čase, keď je skript vykonaný, všetky prvky by už mali byť prehliadačom „nakreslené“ na obrazovke

Práca js8_1. Vytlačte správu o veľkosti okna prehliadača: napr. "rozmery okna prehliadača 600 x 400"

Prístup k prvkom dokumentu v jazyku JavaScript

Existuje niekoľko možností pre prístup k objektom alebo vyhľadávanie objektov:

1. Hľadať podľa id(alebo metóda getElementById), vráti konkrétny prvok
2. Vyhľadajte podľa názvu značky(alebo metóda getElementsByTagName), vráti pole prvkov
3. Hľadať podľa atribútu názvu(alebo metóda getElementsByName), vráti pole prvkov
4. Prostredníctvom rodičovských prvkov(získanie všetkých potomkov)

Zvážme každú z možností podrobnejšie.

1. Prístup k prvku prostredníctvom atribútu id

Syntax: document.getElementById(id)

Metóda getElementById() vráti samotný prvok, ktorý sa potom môže použiť na prístup k údajom

Príklad: Stránka má textové pole s atribútom id="cake" :

...

Nevyhnutné



✍ Riešenie:

alert(document.getElementById("torta").value); // vráti "počet koláčov"

To isté môžete urobiť implementáciou volania objektu cez premennú:

var a=document.getElementById("torta"); alert(a.value); // výstup hodnoty atribútu value, t.j. text "počet koláčov"

Dôležité: Skript musí byť umiestnený za značkou!

Prístup k poli prvkov cez názov menovky a cez index poľa

Syntax:
document.getElementsByTagName(meno);

Príklad: Stránka má textové pole (vstupnú značku) s atribútom value:

...

Nevyhnutné: vypíše hodnotu jeho atribútu value

Metóda getElementsByTagName organizuje prístup ku všetkým vstupným prvkom prostredníctvom premennej (t.j. na rad prvkov vstup), aj keď je tento prvok jediný na stránke. Aby sme odkazovali na konkrétny prvok, napríklad na prvý, zadáme jeho index (pole začína od nulového indexu).

✍ Riešenie:

Odkazovanie na konkrétny prvok podľa indexu:

var a =document.getElementsByTagName("vstup"); alert(a.value); // vráti "počet koláčov"

Prístup k poli prvkov podľa hodnoty atribútu name

Syntax:
document.getElementsByName(meno);

Vráti sa metóda getElementsByName("..."). pole objektov, ktorého atribút názvu sa rovná hodnote zadanej ako parameter metódy. Ak je na stránke iba jeden takýto prvok, metóda stále vracia pole (len s jedným jediným prvkom).

Príklad: Povedzme, že v dokumente je prvok:

var element = document.getElementsByName("MyElem"); upozornenie(prvok.hodnota);

AT tento príklad existuje len jeden prvok, ale odkaz je na nulový prvok poľa.

Dôležité: Metóda funguje len s tými prvkami, pre ktoré je atribút name explicitne uvedený v špecifikácii: sú to značky typu form , input , a , select , textarea a množstvo ďalších zriedkavejších značiek.

Metóda document.getElementsByName nebude fungovať na iných prvkoch ako div , p atď.

Prístup k potomkom rodičovského prvku

Prístup k deťom v javascripte sa deje prostredníctvom vlastnosti childNodes. Nehnuteľnosť patrí nadradenému objektu.

document.getElementById (rodič) .childNodes ;

document.getElementById(parent).childNodes;

Uvažujme o príklade, keď sú značky obrázkov zabalené do kontajnera, značky div. Značka div je teda rodičom týchto obrázkov a samotné značky img sú potomkami značky div:

<div id = "div_for_img" > <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> <img src="pic4.jpg" /> </div>

Teraz poďme na výstup modálne okno hodnoty prvkov poľa s potomkami, t.j. značky img:

var myDiv=document.getElementById("div_for_img"); // prístup k rodičovskému kontajneru var childMas=myDiv.childNodes; // pole detí pre (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Všimnite si, že je vhodné použiť cyklus na iteráciu prvkov poľa detí. Tie. v našom príklade dostaneme cyklus:

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

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

Iné spôsoby prístupu k prvkom

Zvážte iné spôsoby Napríklad:

<telo > <formname="f"> <input type="text" id="t"> <typ vstupu = "tlačidlo" id = "b" hodnota = "(!LANG:button" > !} <vyberte id="s" name="ss"> <ID možnosti = "o1" > 1</možnosť> <ID možnosti = "o2" > 3</možnosť> <ID možnosti = "o3" > 4</možnosť> </vybrať> </form>

1 3 4

Prístup:

... // nechcené a zastarané prístupové prvky prvkov: alert(dokument.formy [ 0 ] .meno ) ; // f alert(document.forms [ 0 ] .prvky [ 0 ] .type ) ; // textové upozornenie(document.forms [ 0 ] .elementy [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // tlačidlo alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // preferované prístupové prvky prvkov alert(document.getElementById("t" ) .type ) ; // textové upozornenie(document.getElementById("s" ) .meno ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // štyri...

... // nechcené a zastarané prístupové objekty prvkov: alert(document.forms.name); // f alert(document.forms.elements.type); // textové upozornenie(document.forms.elements.options.id); // o2 alert(document.f.b.type); // tlačidlo alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // preferované prístupové prvky prvku alert(document.getElementById("t").type); // textové upozornenie(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // štyri...

Príklad: Vytvorte tlačidlo a textové pole v html dokumente. Pomocou skriptu vyfarbite pozadie tlačidla (vlastnosť tlačidla style.backgroundColor) a zobrazte nápis "Ahoj!" v textovom poli (atribút hodnoty).

Html kód:

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

Možnosť 2:

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

document.getElementById("t1").setAttribute("value","Ahoj!"); document.getElementById("b1").style.backgroundColor = "červená";

Úloha Js8_2. Vytvorte značky textového poľa podľa obrázka na obrázku. Dajte im príslušné hodnoty atribútu id (zobrazené na obrázku). Pomocou skriptu pridajte hodnotu „0“ do všetkých číselných polí (za predpokladu číselných hodnôt)

Kontrola správnosti zadávania údajov formulára

Je pole prázdne?

Dátam poskytnutým používateľom nemožno dôverovať. Je nerozumné predpokladať, že ich používatelia budú pri zadávaní údajov kontrolovať. Takže na to musíte použiť javascript.

Aby bolo možné skontrolovať je textové pole prázdne(napríklad keď používateľ vyplní údaje v dotazníku), mali by ste sa obrátiť na vlastnosť value. Ak je hodnota vlastnosti prázdny reťazec (""), musíte na to používateľa nejakým spôsobom upozorniť.

if(document.getElementById("meno").value=="") ( nejaká akcia, napríklad zobrazenie správy s požiadavkou vyplniť pole );

Navyše sa zaobídete aj bez skriptu. Tag zadávanie textu polia majú atribút vzoru. ako je uvedená jeho hodnota regulárny výraz na overenie údajov v danom textovom poli formulára. Ak je prítomný atribút vzor, potom sa formulár neodošle, kým toto textové pole nebude správne vyplnené.
Ak chcete napríklad skontrolovať, či je pole prázdne:

Text namiesto číselnej hodnoty: funkcia isNaN

Ak je pole zadanie číselnej hodnoty, a namiesto toho používateľ zadá text, je potrebné použiť funkciu isNaN (z angl. "Nie je to číslo?"), ktorý skontroluje typ vstupu a vráti hodnotu true, ak je vstup textový a nie číselný.

To. ak sa vráti true, potom by mal byť používateľ vyzvaný na zadanie správneho formátu, t.j. číslo.

if(isNaN(document.getElementById("minúty").value))( Výstraha s výzvou na zadanie číselných údajov );

Daná stránka s prvkami na vyplnenie:


Fragment html kód:

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

<formulár > Názov:<input type="text" id="name"> Počet šišiek:<input type="text" id="donuts" > Minúty:<input type="text" id="minúty"> Medzisúčet:<input type="text" id="subitog" > daň:<input type="text" id="tax"> výsledok:<input type="text" id="total"> <input type = "submit" value = "(!LANG:submit" onclick = "placeOrder();" > !} </form> <script type="text/javascript"> ... </script>

Názov:
Počet šišiek:
Minúty:
Medzisúčet:
daň:
výsledok:

Potrebné:
Vyplňte medzery v úryvku kódu nižšie, čím sa skontroluje, či sú dve textové polia vyplnené správne: názov(id="meno") a minút(id="minúty"). Použite kontrolu na ponechanie prázdneho poľa ("") a správny formát na vyplnenie číselného poľa (isNaN).

* Vykonajte úlohu aj s atribútom vzoru textových polí pomocou .

Úryvok skriptu:

Používa sa v kóde na zostavenie ťažké podmienky prešiel skôr.

Novým konceptom pre vás je volanie funkcie ako obsluha udalosti tlačidla:
onclick="placeOrder();"
Po kliknutí na tlačidlo sa zavolá funkcia placeOrder().

V tomto článku sa zoznámime s vlastnosťami a atribútmi DOM, zvážime, ako sa líšia a ako s nimi správne pracovať. Pozrime sa, aké metódy má JavaScript na vykonávanie operácií s atribútmi.

Ako sa atribút líši od vlastnosti DOM?

Atribúty sú HTML entity, pomocou ktorých môžeme pridávať určité údaje do prvkov v HTML kóde.

Keď prehliadač požiada o stránku, dostane jej zdrojový kód HTML. Potom tento kód analyzuje a na jeho základe vytvorí DOM. Počas tohto procesu Atribúty prvkov HTML sú preložené do ich príslušných vlastností DOM.

Napríklad prehliadač pri čítaní nasledujúceho riadku kódu HTML vytvorí pre tento prvok nasledujúce vlastnosti DOM: id , className , src a alt .

K týmto vlastnostiam sa v kóde JavaScript pristupuje ako k vlastnostiam objektu. Objekt je tu uzol DOM (prvok).

Príklad, kde získame hodnoty vlastností DOM pre vyššie uvedený prvok a vytlačíme ich hodnoty do konzoly:

// získame prvok var brandImg = document.querySelector("#brand"); // zobrazenie hodnôt vlastností DOM prvku console.log(brandImg.id); // "značka" console.log(brandImg.className); // "značka" console.log(brandImg.src); // "/logo.svg?2" console.log(brandImg.alt); // "logo stránky"

Niektoré názvy vlastností DOM sa nezhodujú s názvami atribútov. Jedným z nich je atribút class. Tento atribút zodpovedá vlastnosti DOM className . Tento rozdiel je spôsobený tým, že trieda je kľúčové slovo v JavaScripte je rezervovaný a nemožno ho použiť. Z tohto dôvodu sa vývojári štandardu rozhodli použiť na zhodu iný názov, ktorý bol vybraný ako className .

Ďalšia nuansa súvisí so skutočnosťou, že preklad atribútov HTML špecifikovaných v zdrojový kód dokumentu, vlastnosti DOM nie sú vždy implementované individuálne.

Ak má prvok neštandardný atribút HTML, nevytvorí sa žiadna vlastnosť, ktorá mu zodpovedá v DOM.

Ďalším rozdielom je, že hodnoty určitých atribútov HTML a ich zodpovedajúcich vlastností DOM sa môžu líšiť. Tie. atribút môže mať jednu hodnotu a vlastnosť DOM z neho vytvorená môže mať inú hodnotu.

Jeden takýto atribút je kontrolovaný.

Hodnota kontrolovaného atribútu HTML je v tomto prípade prázdny reťazec. Ale vlastnosť zodpovedajúca tomuto atribútu v DOM bude nastavená na true . Pretože podľa pravidiel štandardu na nastavenie true stačí tento atribút uviesť v HTML kóde a je jedno, akú hodnotu bude mať.

V tomto prípade, aj keď v HTML kóde pre vstupný prvok s typom checkbox neuvedieme atribút check, potom sa preň v DOM aj tak vytvorí vlastnosť checked, ale bude sa rovnať false .

Okrem toho JavaScript umožňuje aj prácu s atribútmi. V DOM API na to existujú špeciálne metódy. Je ale vhodné ich používať len vtedy, keď naozaj potrebujete s dátami takto pracovať.

V tomto prípade musíte vedieť, že keď zmeníme vlastnosť DOM prvku, zmení sa aj atribút, ktorý mu zodpovedá a naopak. Ale tento proces v prehliadačoch nie je vždy vykonávaný jednotlivo.

Hlavné rozdiely medzi vlastnosťami a atribútmi DOM sú:

• hodnota atribútu je vždy reťazec a hodnota vlastnosti DOM je konkrétny typ údajov (nie nevyhnutne reťazec);
• názov atribútu nerozlišuje veľké a malé písmená a vlastnosti DOM rozlišujú veľké a malé písmená. Tie. v HTML kóde môžeme napríklad HTML atribút id napísať ako Id , ID , atď. To isté platí pre názov atribútu, ktorý špecifikujeme v špeciáli JavaScript metódy pracovať s ním. K zodpovedajúcej vlastnosti DOM však môžeme pristupovať iba pomocou id a nič iného.

Práca s vlastnosťami DOM prvku

Práca s vlastnosťami prvkov v JavaScripte, ako je uvedené vyššie, sa vykonáva ako s vlastnosťami objektov.

Aby sme sa však mohli odvolávať na vlastnosť nejakého prvku, musíme ho najskôr získať. Element DOM môžete získať napríklad v JavaScripte pomocou všeobecnej metódy querySelector a kolekciu prvkov DOM napríklad pomocou querySelectorAll .

Ako prvý príklad zvážte nasledujúci prvok HTML:

Na jeho základe budeme analyzovať, ako sa vlastnosti DOM získavajú, menia a pridávajú nové.

Čítanie hodnôt vlastností DOM:

// získame hodnotu DOM vlastnosti id var alertId = alert.id; // "alert" // získame hodnotu vlastnosti DOM className var alertClass = alert. className; // "alert alert-info" // získame hodnotu DOM vlastnosti title var alertId = alert. title; // "Text rady..."

Zmena hodnôt vlastnosti DOM:

// ak chcete zmeniť hodnotu vlastnosti DOM, stačí jej priradiť novú hodnotu alert.title = "(!LANG:New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Pridanie vlastností DOM:

Alert.lang = "ru"; // nastavte vlastnosť lang na "ru" alert.dir = "ltr"; // nastavte vlastnosť dir na "ltr"

Príklad, v ktorom vydáme do konzoly všetky hodnoty triedy, ktoré majú prvky p na stránke:

Var odseky = document.querySelectorAll("p"); for (var i = 0, dĺžka = odseky. dĺžka ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Príklad, v ktorom nastavíme vlastnosť lang všetkých prvkov s triedou obsahu na "ru":

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

Atribúty prvkov a metódy práce s nimi

Atribúty sú na začiatku nastavené v kóde HTML. Hoci sú nejakým spôsobom spojené s vlastnosťami, nie sú to isté. Vo väčšine prípadov by ste mali pracovať s vlastnosťami a pristupovať k atribútom len vtedy, keď to skutočne potrebujete.

Hodnoty atribútov, na rozdiel od vlastností DOM, ako je uvedené vyššie, sú vždy reťazce.

JavaScript má štyri metódy na vykonávanie operácií súvisiacich s atribútmi:

• .hasAttribute("názov_atribútu") – kontroluje, či má prvok zadaný atribút. Ak je kontrolovaný atribút na prvku, potom túto metódu vráti true , inak false .
• .getAttribute("názov_atribútu") – Získa hodnotu atribútu. Ak prvok nemá špecifikovaný atribút, potom táto metóda vráti prázdny reťazec ("") alebo hodnotu null .
• .setAttribute("názov_atribútu", "hodnota_atribútu") – nastaví zadaný atribút so zadanou hodnotou prvku. Ak má prvok zadaný atribút, potom táto metóda jednoducho zmení jeho hodnotu.
• .removeAttribute("názov_atribútu") - odstráni zadaný atribút z prvku.

Zvážte príklady.

vysoko zaujímavý príklad s atribútom value.

Príklad s atribútom value

Získajte hodnotu atribútu value a vlastnosti DOM value:

// získame hodnotu atribútu value prvku name.getAttribute("value"); // "Bob" // získame hodnotu vlastnosti DOM name.value; // "Bob" // aktualizujte hodnotu atribútu value, nastavte ho na novú hodnotu name.setAttribute("value", "Tom"); // "Tom" // získame hodnotu DOM hodnoty vlastnosti name.value; // "Tom"

Tento príklad ukazuje, že keď sa zmení atribút value, prehliadač podľa toho automaticky zmení vlastnosť value DOM.

Teraz urobme opak, a to zmeniť hodnotu vlastnosti DOM a skontrolovať, či sa hodnota atribútu mení:

// nastavenie novej hodnoty pre hodnotu vlastnosti DOM name.value = "(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Tento príklad ukazuje, že zmena vlastnosti DOM nevedie vždy k zodpovedajúcej zmene atribútu. Tie. v tomto prípade zmena hodnoty vlastnosti DOM nezmení jej zodpovedajúci atribút.

To isté sa stane, keď používateľ zadá text do tohto poľa. Vlastnosť value DOM bude obsahovať skutočnú hodnotu a príslušný atribút bude obsahovať pôvodnú hodnotu alebo hodnotu, ktorú sme nastavili napríklad pomocou metódy setAttribute.

Tento príklad ukazuje, že je správnejšie vždy pracovať s vlastnosťami DOM a k atribútu potrebujete pristupovať len vtedy, keď je to skutočne nevyhnutné.

Vlastnosť môžete použiť aj v prípade, že potrebujete získať počiatočnú hodnotu, ktorú sme nastavili v HTML. Vlastnosť, ktorá obsahuje počiatočnú hodnotu atribútu value, sa nazýva defaultValue .

Name.defaultValue; // Tom

Ďalší veľmi zaujímavý príklad, ale teraz s atribútom href.

príklad href

Príklad, kde potrebujeme získať hodnotu odkazu tak, ako bola nastavená v HTML.

V tomto príklade obsahuje atribút href a vlastnosť href DOM rôzne významy. Atribút href je to, čo sme nastavili v kóde, a vlastnosť DOM je úplná adresa URL. Toto rozlíšenie je diktované štandardom, že prehliadač musí preniesť hodnotu href do celej adresy URL.

Ak teda potrebujeme získať to, čo je v atribúte, tak sa v tomto prípade bez metódy getAttribute nezaobídeme.

Nakoniec sa pozrime na vybraný atribút.

Vybraný príklad

Príklad, ktorý ukazuje, ako môžete získať hodnotu vybranej možnosti výberu:

žiadne hodnotenie 1 2 3 4 5

Príklad, ktorý ukazuje, ako získať hodnoty vybratých možností v prvku výberu:

žiadne hodnotenie 1 2 3 4 5

Ďalší spôsob práce s atribútmi (vlastnosť atribútov)

V JavaScripte má každý prvok vlastnosť atribútov, ktorú možno použiť na získanie všetkých jeho atribútov ako objektu NamedNodeMap.

Táto metóda možno použiť, keď potrebujete, napríklad iterovať cez všetky atribúty prvku.

K atribútu v tejto kolekcii sa pristupuje prostredníctvom jeho indexu alebo pomocou metódy položky. Atribúty v tejto kolekcii sa počítajú od 0.

Ukážme si napríklad všetky atribúty nejakého prvku v konzole:

MILUJEM JAVASCRIPT

okrem toho S touto kolekciou môžete pracovať aj pomocou nasledujúcich metód:

• .getNamedItem("názov_atribútu") – získa hodnotu zadaného atribútu (ak zadaný atribút na prvku neexistuje, výsledok bude null).
• .setNamedItem("atribút položky") – pridá nový atribút k prvku alebo aktualizuje hodnotu existujúceho. Ak chcete vytvoriť atribút, musíte použiť metódu document.createAttribute(), ktorej je potrebné odovzdať názov atribútu ako parameter. Potom musí byť vytvorenému atribútu priradená hodnota pomocou vlastnosti value.
• .removeNamedItem("názov_atribútu") – odstráni zadaný atribút z prvku (v dôsledku toho vráti odstránený atribút).

Príklad práce s atribútmi prostredníctvom metód getNamedItem, setNamedItem a removeNamedItem:

MILUJEM JAVASCRIPT

Úlohy

• Vytlačte do konzoly všetky prvky dokumentu, ktoré majú atribút id.
• Pridajte atribút title ku všetkým obrázkom na stránke, ak tento atribút nemajú. Hodnota atribútu je nastavená rovná hodnote atribút alt.

Môžete vytvoriť vlastnú väzbu viazania, ktorý bude kontrolovať hodnotu konkrétnej pozorovateľnej veličiny boolovská hodnota pred pridaním alebo nepridaním atribútov. Pozrite si tento príklad:

Ko.bindingHandlers.attrIf = ( update: function (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); ) ) ) ) ); odkaz

Prial by som si, aby som mohol odpovedať @gbs, ale nemôžem. Moje riešenie by bolo mať dva rovnaké HTML prvok: jeden s atribútom, bez neho a s podmienkou vyradenia na pridanie jedného z nich podľa prvku. Tiež som si vedomý tohto obvyklého čakania, ale ktoré riešenie je efektívnejšie?

Nastavuje hodnotu atribútu na zadanom prvku. Ak atribút už existuje, hodnota sa aktualizuje; inak sa pridá nový atribút so zadaným názvom a hodnotou.

Syntax

prvok.setAttribute( názov, hodnotu);

Parametre

name DOMString špecifikujúci názov atribútu, ktorého hodnota sa má nastaviť. Názov atribútu sa automaticky skonvertuje na malé písmená, keď sa na element HTML v dokumente HTML zavolá setAttribute(). value DOMString obsahujúci hodnotu, ktorá sa má priradiť atribútu. Akákoľvek zadaná nereťazcová hodnota sa automaticky skonvertuje na reťazec.

Booleovské atribúty sa považujú za pravdivé, ak sa na prvku vôbec nachádzajú, bez ohľadu na ich skutočnú hodnotu; spravidla by ste mali zadať prázdny reťazec ("") v hodnote (niektorí ľudia používajú názov atribútu; toto funguje, ale je neštandardné). Praktickú ukážku nájdete nižšie.

Keďže zadaná hodnota sa skonvertuje na reťazec, zadanie hodnoty null nemusí nevyhnutne robiť to, čo očakávate. Namiesto odstránenia atribútu alebo nastavenia jeho hodnoty na hodnotu null nastaví hodnotu atribútu na reťazec „null“ . Ak chcete odstrániť atribút, zavolajte removeAttribute() .

návratová hodnota

Výnimky

InvalidCharacterError Zadaný názov atribútu obsahuje jeden alebo viac znakov, ktoré nie sú platné v názvoch atribútov.

príklad

V nasledujúcom príklade sa setAttribute() používa na nastavenie atribútov na .

HTML

ahoj svet

JavaScript

var b = document.querySelector("tlačidlo"); b.setAttribute("meno", "helloButton"); b.setAttribute("disabled", "");

To ukazuje dve veci:

• Prvé volanie funkcie setAttribute() vyššie ukazuje zmenu hodnoty atribútu name na „helloButton“. Môžete to vidieť pomocou inšpektora stránok vášho prehliadača (Chrome , Edge , Firefox , Safari).
• Ak chcete nastaviť hodnotu boolovského atribútu, ako napríklad vypnuté , môžete zadať ľubovoľnú hodnotu. Odporúčané hodnoty sú prázdny reťazec alebo názov atribútu. Dôležité je len to, že ak je atribút vôbec prítomný, bez ohľadu na jeho skutočnú hodnotu, jeho hodnota sa považuje za pravdivú . Neprítomnosť atribútu znamená, že jeho hodnota je nepravdivá. Nastavením hodnoty atribútu disabled na prázdny reťazec ("") nastavíme disabled na true , čo spôsobí, že tlačidlo bude deaktivované.

Metódy DOM, ktoré sa zaoberajú atribútmi prvku:

Najčastejšie používané metódy nezohľadňujúce priestor názvov	Varianty využívajúce priestor názvov (DOM Level 2)	Metódy DOM úrovne 1 na priame zaobchádzanie s uzlami Attr (zriedka používané)	Metódy názvového priestoru DOM úrovne 2 na priame zaobchádzanie s uzlami Attr (zriedka používané)
setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute(DOM2)	hasAttributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Špecifikácia

• Jadro DOM úrovne 2: setAttribute (zavedené v jadre DOM úrovne 1)

Kompatibilita prehliadača

Tabuľka kompatibility na tejto stránke je vygenerovaná zo štruktúrovaných údajov. Ak by ste chceli prispieť k údajom, pozrite si https://github.com/mdn/browser-compat-data a pošlite nám žiadosť o stiahnutie.

Aktualizujte údaje o kompatibilite na GitHub

	Desktop						Mobilné
	Chrome	hrana	Firefox	internet Explorer	Opera	safari	android webview	Chrome pre Android	Firefox pre Android	Opera pre Android	Safari na iOS	Internet Samsung
setAttribute	Plná podpora prehliadača Chrome Áno	Úplná podpora Edge 12	Plná podpora FirefoxuÁno	Plná podpora IE 5 poznámky Plná podpora 5 poznámky poznámky V programe Internet Explorer 7 a starších verziách setAttribute nenastaví štýly a odstráni udalosti, keď sa ich pokúsite nastaviť.	Opera Plná podpora Áno	Plná podpora Safari 6	WebView Plná podpora Androidu Áno	Chrome Plná podpora Androidu Áno	Firefox Plná podpora AndroiduÁno	Opera Android Plná podpora Áno	Safari iOS Plná podpora Áno	Plná podpora Samsung Internet Android Áno

Legenda

Plná podpora Plná podpora Pozri poznámky k implementácii. Pozri implementačné poznámky.

Gecko poznámky

Použitie setAttribute() na úpravu určitých atribútov, najmä hodnoty v XUL, funguje nekonzistentne, pretože atribút určuje predvolenú hodnotu. Ak chcete získať prístup k aktuálnym hodnotám alebo ich upraviť, mali by ste použiť vlastnosti. Napríklad použite Element.value namiesto Element.setAttribute() .