Tato lekce je o čtení a změně atributů prvků v jQuery.

Atributy jsou dvojice název/hodnota, která je přiřazena prvkům ve značce. Příklady atributů ( href, titul, src, třída):

• attr() pro čtení, přidávání a změnu atributů
• removeAttr() k odstranění atributů

Tato lekce se zabývá metodami attr() a removeAttr().

Pro práci s třídami CSS existují speciální metody jQuery, které jsou popsány v jiné lekci . Při práci na projektu v jQuery musíte často manipulovat s třídami CSS a atribut třídy může obsahovat několik názvů tříd, takže je mnohem obtížnější s nimi pracovat než s jinými atributy.

Pokud budete pracovat s hodnotami vstupního pole, je lepší použít metodu val(), která poskytuje nejen zjednodušenou verzi atributu value, ale také dokáže číst a nastavovat hodnoty ve vybraných prvcích vybrat seznam.

Čtení hodnoty atributu

Čtení hodnoty atributu prvku je jednoduché. Jediné, co musíte udělat, je zavolat metodu attr() na objektu jQuery, který obsahuje prvek, a předat mu název atributu ke čtení. Metoda vrací hodnotu atributu:

// Zobrazí hodnotu atributu "href" výstrahy prvku #myLink ($("a#myLink").attr("href"));

Pokud váš objekt jQuery obsahuje více prvků, metoda attr() čte pouze hodnoty atributů pro první prvek v sadě.

Nastavení hodnot atributů

Metodu attr() lze také použít k přidání nebo změně hodnot atributů:

• Pokud atribut neexistuje v živlu bude přidal a bude mu přiřazena daná hodnota.
• Pokud atribut již existuje, jeho hodnota bude aktualizováno nastavená hodnota.

Existují tři způsoby, jak pomocí metody attr() přidat nebo změnit atributy:

1. Můžete přidat/změnit atributy pro jakýkoli prvek (nebo sadu prvků).
2. Můžete přidat/změnit více atributů najednou pro prvek (nebo prvky) zadáním mapy názvů atributů a hodnot.
3. je možné dynamicky přidat/změnit jeden atribut pro více prvků pomocí funkce zpětného volání.

Nastavte jeden atribut

Chcete-li nastavit nebo změnit atribut prvku, zavolejte metodu attr() s názvem a hodnotou atributu. Například:

// Změňte hodnotu atributu "href" prvku #myLink na "http://www.example.com/" // (pokud atribut "href" neexistuje, bude vytvořen automaticky) $( "a#myLink"). attr("href", "http://www.example.com/");

Je také možné nastavit stejný atribut na více prvků:

Nastavení více atributů pomocí mapy

Pomocí mapy můžete u jednoho nebo více prvků nastavit více atributů současně. Je to seznam párů název/hodnota, který vypadá takto:

( název1: hodnota1, název2: hodnota2, ... )

Následující příklad nastavuje dva atributy v prvku img současně:

// Nastavte atributy "src" a "alt" pro prvek img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "Moje fotka" )) ;

Můžete také nastavit atributy pro více prvků:

// Nastavení atributů "src" a "alt" pro všechny prvky img $("img").attr(( "src": "mypic.jpg", "alt": "Moje fotografie" ));

Nastavení atributů pomocí funkce zpětného volání

Místo předávání hodnot atributů metodě attr() můžete předat název funkce zpětného volání. Tímto způsobem můžete dynamicky nastavit hodnoty atributů pro více prvků podle pozice prvku, existující hodnoty atributu nebo jiných vlastností.

Funkce return musí mít dva argumenty:

• Index pozice aktuálně vybraného prvku v sadě (od nuly)
• stará hodnota atributu pro aktuálně vybraný prvek

Návratová hodnota funkce se používá k nahrazení hodnoty atributu.

Kromě aktuální pozice prvku a staré hodnoty atributu může vaše funkce přistupovat k samotnému prvku pomocí klíčového slova this. Tímto způsobem můžete přistupovat k jakékoli vlastnosti nebo metodě prvku z funkce zpětného volání.

Příklad používá zpětné volání k přidání atributu alt ke každému obrázku na stránce na základě pozice obrázku a jeho atributu src:

Po provedení kódu bude mít první obrázek atribut alt s hodnotou „Picture 1: myphoto.jpg“ a druhý obrázek bude mít atribut alt s hodnotou „Picture 2: yourphoto.jpg“ .

Smazání atributu

Chcete-li odstranit atribut z prvku, zavolejte metodu removeAttr() a předejte jí název atributu, který chcete odstranit. Například:

// Odstraňte atribut "title" z prvku #myLink $("a#myLink").removeAttr("title");

Můžete také volat metodu removeAttr() na objektu jQuery, který obsahuje více prvků. Metoda removeAttr() odstraní daný atribut ze všech prvků:

// Odebere atribut "title" ze všech odkazů $("a").removeAttr("title");

souhrn

V tomto tutoriálu jsme se zabývali problémy práce s atributy prvků v jQuery:

• Čtení hodnot atributů
• Nastavení jednoho atributu
• Nastavení více různých atributů současně
• Použití funkce zpětného volání k dynamickému nastavení hodnot atributů v sadě prvků
• Odebrání atributů z prvku

Lekce se bude týkat začátku tématu: objektový model dokumentu (javascriptový DOM) je základem dynamického HTML, budou studovány přístupové metody k objektům a zváženy způsoby zpracování javascriptových událostí

• Obvykle objekt je složený datový typ, který kombinuje mnoho hodnot do společného modulu a umožňuje ukládat a načítat hodnoty na vyžádání pod jejich názvy.

Již dříve jsme se začali seznamovat s konceptem v javascriptu.

• V javascriptu existuje něco jako DOM - Objektový model dokumentu- objektový model webové stránky (html stránky).
• Jeho objekty jsou tagy dokumentu nebo, jak se říká, uzly dokumentu.

Podívejme se na schéma hierarchie objektů v JavaScriptu a kde v hierarchii se nachází příslušný objekt dokumentu.

Prvek skriptu má atributy:

odložit (počkejte, až se stránka plně načte).

Příklad:

Vlastnosti a atributy objektu dokumentu v JavaScriptu

Objekt dokumentu představuje webovou stránku.

Důležité: Chcete-li získat přístup k vlastnostem a metodám objektu v JavaScriptu, stejně jako u jiných objektů, používá se tečková notace:

těch. nejprve se zapíše samotný objekt, poté je jeho vlastnost, atribut nebo metoda označena tečkou a bez mezer

object.property object.attribute object.method()

Zvažte příklad:

Příklad: nechejte html dokument mít tag

a specifické pro něj styl css(dokonce dva styly, druhý je užitečný pro zadání):

Nezbytné:

1. nastavit novou vlastnost objektu, přiřadit mu hodnotu a vydat tuto hodnotu;
2. zobrazit hodnotu atributu objektu;
3. změnit hodnotu atributu objektu.

Udělejme úkol v pořadí:
✍ Řešení:

Od toho jazyk javascript, pak lze objekt vymyslet a nastavit libovolnou vlastnost s libovolnou hodnotou. Nejprve však získejte přístup k objektu (přístup k objektu bude podrobně popsán později v této lekci):

// získat přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); element.myProperty = 5; // přiřazení vlastnosti alert(element.myProperty); // zobrazí se v dialogovém okně

Další úkol souvisí s atributem object. Atribut objektu jsou atributy značek. Tito. v našem případě jsou dva: atribut class s hodnotou small a atribut id. Budeme pracovat s atributem class.

Nyní přidáme nějaký javascriptový kód pro zobrazení hodnoty atributu našeho objektu. Kód musí být po hlavní značky:

// získat přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // zobrazí se v dialogovém okně

A poslední úkol: změňte hodnotu atributu. K tomu jsme připravili styl velký. Změňte hodnotu atributu class na tento styl:

// získat přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); element.setAttribute("třída","velký");

V důsledku toho se náš prvek zvětší a zmodrá (třída velký).

Nyní se blíže podíváme na metody použité v příkladu pro práci s atributy.

Metody pro manipulaci s atributy v JavaScriptu

Atributy lze přidávat, odebírat a měnit. K tomu existují speciální metody:

• Přidání atributu (nastavení nové hodnoty):

getAttribute(attr)

• Kontrola přítomnosti tohoto atributu:

removeAttribute(attr)

Různé způsoby práce s atributy

Příklad: Vytiskněte hodnotu atributu value textového bloku.

✍ Řešení:

• Nechť existuje textový blok:

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

• Zvažte několik způsobů, jak získat hodnotu atributu (pro výstup použijte způsob upozornění()):

elem.getAttribute("value" )

elem.getAttribute("value")

2. tečková notace:

prvek.atributy .hodnota

prvek.atributy.hodnota

3. zápis v závorce:


Nastavte hodnoty atributů Můžete to také udělat několika způsoby:

var x = "klíč"; // klíč - název atributu, hodnota - hodnota atributu // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. klíč elem.attributes[" "] = "val" // 4. elem.setAttribute(x, "val")

vlastnosti prvků těla

Prostřednictvím objektu dokumentu můžete přistupovat k tělu dokumentu – značce body – s některými jeho užitečnými vlastnostmi.

Například značka body má dvě vlastnosti: šířka a výška klientského okna:

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


Ale nejdůležitější, jak jsme se již dozvěděli, je to, že přes objekt dokumentu se pomocí speciálních metod přistupuje ke všem prvkům stránky, tedy tagům.

Důležité: Při přístupu ke značkám stránky, jako je tento, musí být skript na konci stromu prvků před závěrečným tělem ! Protože v době, kdy je skript spuštěn, všechny prvky by již měly být „nakresleny“ prohlížečem na obrazovce

Práce js8_1. Vytiskněte zprávu o velikosti okna prohlížeče: např. "rozměry okna prohlížeče 600 x 400"

Přístup k prvkům dokumentu v JavaScriptu

Existuje několik možností pro přístup k objektům nebo vyhledávání objektů:

1. Hledat podle id(nebo metoda getElementById), vrátí konkrétní prvek
2. Vyhledávání podle názvu značky(nebo metoda getElementsByTagName), vrátí pole prvků
3. Hledat podle atributu názvu(nebo metoda getElementsByName), vrátí pole prvků
4. Prostřednictvím rodičovských prvků(získání všech potomků)

Zvažme každou z možností podrobněji.

1. Přístup k prvku prostřednictvím jeho atributu id

Syntax: document.getElementById(id)

Metoda getElementById() vrací samotný prvek, který pak lze použít pro přístup k datům

Příklad: Stránka má textové pole s atributem id="cake" :

...

Nezbytné



✍ Řešení:

alert(document.getElementById("dort").value); // vrátí "počet dortů"

Totéž můžete provést implementací objektového volání prostřednictvím proměnné:

var a=document.getElementById("dort"); alert(a.value); // vypíše hodnotu atributu value, tzn. text "počet dortů"

Důležité: Skript musí být umístěn za značkou!

Přístup k poli prvků prostřednictvím názvu jmenovky a prostřednictvím indexu pole

Syntax:
document.getElementsByTagName(name);

Příklad: Stránka má textové pole (vstupní značku) s atributem value:

...

Nezbytné: vypíše hodnotu atributu value

Metoda getElementsByTagName organizuje přístup ke všem vstupním prvkům prostřednictvím proměnné (tj. na řadu prvků input), i když je tento prvek jediný na stránce. Abychom odkazovali na konkrétní prvek, například na první, uvedeme jeho index (pole začíná od nulového indexu).

✍ Řešení:

Odkazování na konkrétní prvek podle indexu:

var a =document.getElementsByTagName("vstup"); alert(a.value); // vrátí "počet dortů"

Přístup k poli prvků pomocí hodnoty atributu name

Syntax:
document.getElementsByName(name);

Vrátí se metoda getElementsByName("..."). pole objektů, jehož atribut name se rovná hodnotě zadané jako parametr metody. Pokud je na stránce pouze jeden takový prvek, pak metoda stále vrací pole (pouze s jedním jediným prvkem).

Příklad:Řekněme, že v dokumentu je prvek:

var element = document.getElementsByName("MyElem"); alert(prvek.hodnota);

V tento příklad existuje pouze jeden prvek, ale odkaz je na nulový prvek pole.

Důležité: Metoda funguje pouze s těmi prvky, pro které je atribut name výslovně uveden ve specifikaci: jedná se o tagy formuláře , input , a , select , textarea a řada dalších vzácnějších tagů.

Metoda document.getElementsByName nebude fungovat na jiných prvcích jako div , p atd.

Přístup k potomkům nadřazeného prvku

Přístup k dětem v javascriptu se děje prostřednictvím vlastnosti childNodes. Vlastnost patří nadřazenému objektu.

document.getElementById (rodič) .childNodes ;

document.getElementById(parent).childNodes;

Zvažte příklad, kdy jsou značky obrázků zabaleny do kontejneru, značky div. Značka div je tedy rodičem těchto obrázků a samotné značky img jsou potomky 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>

Nyní pojďme na výstup modální okno hodnoty prvků pole s potomky, tj. img tagy:

var myDiv=document.getElementById("div_for_img"); // přístup k rodičovskému kontejneru var childMas=myDiv.childNodes; // pole potomků pro (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Všimněte si, že je vhodné použít smyčku k iteraci přes prvky pole potomků. Tito. v našem příkladu dostaneme cyklus:

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

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

Jiné způsoby přístupu k prvkům

Zvažte jiné způsoby Například:

<tělo > <formname="f"> <input type="text" id="t"> <typ vstupu = "tlačítko" id = "b" hodnota = "(!LANG:button" > !} <vyberte id="s" name="ss"> <ID možnosti = "o1" > 1</volba> <ID možnosti = "o2" > 3</volba> <ID možnosti = "o3" > 4</volba> </vybrat> </form>

1 3 4

Přístup:

... // nechtěné a zastaralé přístupové objekty prvků: alert(dokument.formy [ 0 ] .jméno ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // textové upozornění(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // tlačítko alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // preferované přístupové prvky prvků alert(document.getElementById("t" ) .type ) ; // textové upozornění(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // čtyři...

... // nechtěné a zastaralé přístupové objekty prvků: alert(document.forms.name); // f alert(document.forms.elements.type); // textové upozornění(document.forms.elements.options.id); // o2 alert(document.f.b.type); // tlačítko alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // preferované přístupové objekty prvku alert(document.getElementById("t").type); // textové upozornění(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // čtyři...

Příklad: Vytvořte tlačítko a textové pole v html dokumentu. Pomocí skriptu vybarvěte pozadí tlačítka (vlastnost tlačítka style.backgroundColor) a zobrazte nápis "Ahoj!" v textovém poli (atribut hodnoty).

Html kód:

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

Možnost 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á";

Úkol Js8_2. Vytvořte značky textových polí podle obrázku na obrázku. Přidělte jim příslušné hodnoty atributu id (zobrazené na obrázku). Pomocí skriptu přidejte do všech číselných polí hodnotu "0" (za předpokladu číselných hodnot)

Kontrola správnosti zadání údajů formuláře

Je pole ponecháno prázdné?

Uživatelským datům nelze důvěřovat. Je nerozumné předpokládat, že je uživatelé budou při zadávání údajů kontrolovat. K tomu je tedy potřeba použít javascript.

Aby bylo možné zkontrolovat je textové pole prázdné(například poté, co uživatel vyplní údaje v dotazníku), měli byste se obrátit na vlastnost value. Pokud je hodnota vlastnosti prázdný řetězec (""), musíte na to uživatele nějak upozornit.

if(document.getElementById("name").value=="") ( nějaká akce, např. zobrazení zprávy s požadavkem na vyplnění pole );

Navíc se obejdete bez skriptu. Štítek zadávání textu pole mají atribut vzor. jak je uvedena jeho hodnota regulární výraz pro ověření dat v daném textovém poli formuláře. Pokud je přítomen atribut vzor, pak se formulář neodešle, dokud nebude toto textové pole správně vyplněno.
Chcete-li například zkontrolovat, zda je pole ponecháno prázdné:

Text místo číselné hodnoty: funkce isNaN

Pokud je pole zadáním číselné hodnoty, a místo toho uživatel zadá text, je nutné použít funkci isNaN (z angl. "Není to číslo?"), který zkontroluje typ vstupu a vrátí hodnotu true, pokud je vstup textový namísto číselný.

Že. pokud je vráceno true, pak by měl být uživatel vyzván k zadání správného formátu, tzn. číslo.

if(isNaN(document.getElementById("minuty").value))( Výstraha s výzvou k zadání číselných údajů );

Na stránce s prvky k vyplnění:


Fragment html kód:

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

<formulář > Název:<input type="text" id="name"> Počet koblih:<input type="text" id="donuts" > Minut:<input type="text" id="minuty"> Mezisoučet:<input type="text" id="subitog" > Daň:<input type="text" id="tax"> Výsledek:<input type="text" id="total"> <input type = "submit" value = "(!LANG:submit" onclick = "placeOrder();" > !} </form> <script type="text/javascript"> ... </script>

Název:
Počet koblih:
Minut:
Mezisoučet:
Daň:
Výsledek:

Nezbytné:
Vyplňte prázdná místa ve fragmentu kódu níže, který zkontroluje, zda jsou správně vyplněna dvě textová pole: název(id="jméno") a minut(id="minuty"). Použijte kontrolu pro ponechání prázdného pole ("") a správný formát pro vyplnění číselného pole (isNaN).

* Proveďte práci také s atributem vzoru textových polí pomocí .

Fragment skriptu:

Používá se v kódu k sestavení obtížné podmínky prošel dříve.

Novým konceptem pro vás je volání funkce jako obsluhy události tlačítka:
onclick="placeOrder();"
Po kliknutí na tlačítko se zavolá funkce placeOrder().

V tomto článku se seznámíme s vlastnostmi a atributy DOM, zvážíme, jak se liší a jak s nimi správně pracovat. Podívejme se, jaké metody má JavaScript pro provádění operací s atributy.

Jak se atribut liší od vlastnosti DOM?

Atributy jsou HTML entity, pomocí kterých můžeme přidat určitá data k prvkům v HTML kódu.

Když si prohlížeč vyžádá stránku, obdrží její zdrojový HTML kód. Poté tento kód analyzuje a na jeho základě vytvoří DOM. Během tohoto procesu Atributy elementů HTML jsou převedeny do příslušných vlastností DOM.

Prohlížeč například při čtení následujícího řádku kódu HTML vytvoří pro tento prvek následující vlastnosti DOM: id , className , src a alt .

K těmto vlastnostem se v kódu JavaScript přistupuje jako k vlastnostem objektu. Objekt je zde uzel DOM (prvek).

Příklad, kdy získáme hodnoty vlastností DOM pro výše uvedený prvek a vytiskneme jejich hodnoty do konzoly:

// získání prvku var brandImg = document.querySelector("#brand"); // zobrazení hodnot 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 webu"

Některé názvy vlastností DOM se neshodují s názvy atributů. Jedním z nich je atribut class. Tento atribut odpovídá vlastnosti DOM className . Tento rozdíl je způsoben tím, že třída je klíčové slovo v JavaScriptu je vyhrazena a nelze ji použít. Z tohoto důvodu se vývojáři standardu rozhodli použít pro shodu jiné jméno, které bylo vybráno jako className .

Další nuance souvisí se skutečností, že překlad atributů HTML uvedených v zdrojový kód dokumentu, vlastnosti DOM nejsou vždy implementovány jedna ku jedné.

Pokud má prvek nestandardní atribut HTML, nevytvoří se žádná odpovídající vlastnost v modelu DOM.

Dalším rozdílem je, že hodnoty určitých atributů HTML a jejich odpovídajících vlastností DOM se mohou lišit. Tito. atribut může mít jednu hodnotu a vlastnost DOM z něj vytvořená může mít jinou hodnotu.

Jeden takový atribut je zaškrtnutý.

Hodnota kontrolovaného atributu HTML je v tomto případě prázdný řetězec. Ale vlastnost odpovídající tomuto atributu v DOM bude nastavena na true . Protože podle pravidel standardu pro nastavení true stačí tento atribut pouze uvést v HTML kódu a je jedno, jakou bude mít hodnotu.

V tomto případě, i když v HTML kódu u vstupního prvku s typem checkboxu nezadáme atribut check, pak se pro něj v DOM stejně vytvoří vlastnost checked, ale bude se rovnat false .

Kromě toho JavaScript také umožňuje pracovat s atributy. K tomu existují speciální metody v DOM API. Je ale vhodné je používat pouze tehdy, když opravdu potřebujete s daty takto pracovat.

V tomto případě musíte vědět, že když změníme vlastnost DOM prvku, změní se i jemu odpovídající atribut a naopak. Ale tento proces v prohlížečích není vždy prováděn jednotlivě.

Hlavní rozdíly mezi vlastnostmi a atributy DOM jsou:

• hodnota atributu je vždy řetězec a hodnota vlastnosti DOM je konkrétní datový typ (ne nutně řetězec);
• název atributu nerozlišuje malá a velká písmena a vlastnosti DOM rozlišují malá a velká písmena. Tito. v HTML kódu můžeme například HTML atribut id zapsat jako Id , ID atd. Totéž platí pro název atributu, který specifikujeme ve special JavaScriptové metody pracovat s ním. K odpovídající vlastnosti DOM však můžeme přistupovat pouze pomocí id a ničím jiným.

Práce s vlastnostmi DOM prvku

Práce s vlastnostmi prvků v JavaScriptu, jak je uvedeno výše, se provádí jako s vlastnostmi objektů.

Ale abychom mohli odkazovat na vlastnost nějakého prvku, musí být nejprve získán. Prvek DOM můžete získat například v JavaScriptu pomocí obecné metody querySelector a kolekci prvků DOM například pomocí querySelectorAll .

Jako první příklad zvažte následující prvek HTML:

Na jeho základě budeme analyzovat, jak se vlastnosti DOM získávají, mění a přidávají nové.

Čtení hodnot vlastností DOM:

// získání hodnoty DOM vlastnosti id var alertId = alert.id; // "alert" // získá hodnotu vlastnosti DOM className var alertClass = alert. className; // "alert alert-info" // získá hodnotu DOM vlastnosti title var alertId = alert. title; // "Text nápovědy..."

Změna hodnot vlastnosti DOM:

// Chcete-li změnit hodnotu vlastnosti DOM, stačí k ní přiřadit novou hodnotu alert.title = "(!LANG:New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

Přidání vlastností DOM:

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

Příklad, ve kterém vypíšeme do konzole všechny hodnoty třídy, které mají prvky p na stránce:

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

Příklad, ve kterém nastavíme vlastnost lang všech prvků s třídou obsahu na "ru":

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

Atributy prvků a metody práce s nimi

Atributy jsou zpočátku nastaveny v kódu HTML. Přestože jsou nějakým způsobem spojeny s vlastnostmi, nejsou totéž. Ve většině případů byste měli pracovat s vlastnostmi a přistupovat k atributům pouze tehdy, když to opravdu potřebujete.

Hodnoty atributů, na rozdíl od vlastností DOM, jak je uvedeno výše, jsou vždy řetězce.

JavaScript má čtyři způsoby provádění operací souvisejících s atributy:

• .hasAttribute("název_atributu") – kontroluje, zda má prvek zadaný atribut. Pokud je kontrolovaný atribut na prvku, pak tato metoda vrací true , jinak false .
• .getAttribute("název_atributu") – Získá hodnotu atributu. Pokud prvek nemá zadaný atribut, pak tato metoda vrátí prázdný řetězec ("") nebo null .
• .setAttribute("název_atributu", "hodnota_atributu") – nastaví prvek zadaný atribut se zadanou hodnotou. Pokud má prvek zadaný atribut, pak tato metoda jednoduše změní jeho hodnotu.
• .removeAttribute("název_atributu") - odstraní zadaný atribut z prvku.

Zvažte příklady.

Vysoce zajímavý příklad s atributem value.

Příklad s atributem value

Získejte hodnotu atributu value a vlastnosti value DOM:

// získání hodnoty atributu value prvku name.getAttribute("value"); // "Bob" // získá hodnotu hodnoty vlastnosti DOM name.value; // "Bob" // aktualizuje hodnotu atributu value, nastaví ji na novou hodnotu name.setAttribute("value", "Tom"); // "Tom" // získá hodnotu DOM hodnoty vlastnosti name.value; // "Tom"

Tento příklad ukazuje, že když se změní atribut value, prohlížeč podle toho automaticky změní vlastnost value DOM.

Nyní udělejme opak, a to změnit hodnotu vlastnosti DOM a zkontrolovat, zda se hodnota atributu změní:

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

Tento příklad ukazuje, že změna vlastnosti DOM nevede vždy k odpovídající změně atributu. Tito. v tomto případě změna hodnoty vlastnosti DOM nezmění její odpovídající atribut.

Totéž se stane, když uživatel zadá text do tohoto pole. Vlastnost value DOM bude obsahovat skutečnou hodnotu a odpovídající atribut bude obsahovat původní hodnotu nebo tu, kterou jsme nastavili například pomocí metody setAttribute.

Tento příklad ukazuje, že je správnější vždy pracovat s vlastnostmi DOM a že k atributu potřebujete přistupovat pouze tehdy, když je to opravdu nutné.

I v případě, kdy potřebujete získat počáteční hodnotu, kterou jsme nastavili v HTML, můžete vlastnost použít. Vlastnost, která obsahuje počáteční hodnotu atributu value, se nazývá defaultValue .

Name.defaultValue; // Tome

Další velmi zajímavý příklad, ale nyní s atributem href.

příklad href

Příklad, kdy potřebujeme získat hodnotu odkazu tak, jak byla nastavena v HTML.

V tomto příkladu obsahuje atribut href a vlastnost DOM href různé významy. Atribut href je to, co jsme nastavili v kódu, a vlastnost DOM je úplná adresa URL. Toto rozlišení je dáno standardem, že prohlížeč musí přenést hodnotu href do úplné adresy URL.

Pokud tedy potřebujeme získat to, co je v atributu, tak se v tomto případě bez metody getAttribute neobejdeme.

Nakonec se podíváme na vybraný atribut.

Vybraný příklad

Příklad, který ukazuje, jak můžete získat hodnotu vybrané možnosti výběru:

žádné hodnocení 1 2 3 4 5

Příklad, který ukazuje, jak získat hodnoty vybraných možností v prvku select:

žádné hodnocení 1 2 3 4 5

Další způsob práce s atributy (vlastnost atributů)

V JavaScriptu má každý prvek vlastnost atributů, kterou lze použít k načtení všech jeho atributů jako objektu NamedNodeMap.

Tato metoda lze použít, když potřebujete, například iterovat přes všechny atributy prvku.

K atributu v této kolekci se přistupuje pomocí jeho indexu nebo pomocí metody položky. Atributy v této kolekci se počítají od 0.

Zobrazme například všechny atributy některého prvku v konzole:

MILUJU JAVASCRIPT

Kromě, S touto kolekcí můžete také pracovat pomocí následujících metod:

• .getNamedItem("název_atributu") – získá hodnotu zadaného atributu (pokud zadaný atribut na prvku neexistuje, bude výsledek null).
• .setNamedItem("item atribut") – přidá nový atribut k prvku nebo aktualizuje hodnotu existujícího. Chcete-li vytvořit atribut, musíte použít metodu document.createAttribute(), které musí být předán název atributu jako parametr. Poté musí být vytvořenému atributu přiřazena hodnota pomocí vlastnosti value.
• .removeNamedItem("název_atributu") – odebere zadaný atribut z prvku (jako výsledek vrátí odstraněný atribut).

Příklad práce s atributy prostřednictvím metod getNamedItem, setNamedItem a removeNamedItem:

MILUJU JAVASCRIPT

Úkoly

• Vytiskněte do konzoly všechny prvky dokumentu, které mají atribut id.
• Přidejte atribut title ke všem obrázkům na stránce, pokud tento atribut nemají. Nastavena hodnota atributu rovna hodnotě atribut alt.

Můžete vytvořit vlastní vazbu vázání, který bude kontrolovat hodnotu konkrétní pozorovatelné booleovská hodnota před přidáním nebo nepřidáním atributů. Viz tento pří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

Přál bych si, abych mohl odpovědět @gbs, ale nemůžu. Moje řešení by bylo mít dva stejné HTML prvek: jeden s atributem, bez něj a podmínkou vyřazení pro přidání jednoho z nich podle prvku. Také jsem si vědom tohoto obvyklého čekání, ale které řešení je efektivnější?

Nastaví hodnotu atributu na zadaném prvku. Pokud atribut již existuje, hodnota se aktualizuje; jinak se přidá nový atribut se zadaným názvem a hodnotou.

Syntax

živel.setAttribute( název, hodnota);

Parametry

name DOMString určující název atributu, jehož hodnota má být nastavena. Název atributu se automaticky převede na malá písmena, když se setAttribute() zavolá na prvek HTML v dokumentu HTML. value DOMString obsahující hodnotu, která má být přiřazena atributu. Jakákoli zadaná neřetězcová hodnota se automaticky převede na řetězec.

Booleovské atributy jsou považovány za pravdivé, pokud jsou v prvku vůbec přítomny, bez ohledu na jejich skutečnou hodnotu; zpravidla byste měli v hodnotě zadat prázdný řetězec ("") (někteří lidé používají název atributu; to funguje, ale je to nestandardní). Praktickou ukázku naleznete níže.

Protože se zadaná hodnota převede na řetězec, zadání null nemusí nutně dělat to, co očekáváte. Místo odstranění atributu nebo nastavení jeho hodnoty na null nastaví hodnotu atributu na řetězec „null“ . Pokud chcete odstranit atribut, zavolejte removeAttribute() .

návratová hodnota

Výjimky

InvalidCharacterError Zadaný název atributu obsahuje jeden nebo více znaků, které nejsou platné v názvech atributů.

příklad

V následujícím příkladu se setAttribute() používá k nastavení atributů na .

HTML

Ahoj světe

JavaScript

var b = document.querySelector("tlačítko"); b.setAttribute("jméno", "helloButton"); b.setAttribute("disabled", "");

To ukazuje dvě věci:

• První volání funkce setAttribute() výše ukazuje změnu hodnoty atributu name na „helloButton“. Můžete to vidět pomocí inspektoru stránek vašeho prohlížeče (Chrome , Edge , Firefox , Safari).
• Chcete-li nastavit hodnotu booleovského atributu, například vypnuto , můžete zadat libovolnou hodnotu. Prázdný řetězec nebo název atributu jsou doporučené hodnoty. Vše, na čem záleží, je, že pokud je atribut vůbec přítomen, bez ohledu na jeho skutečnou hodnotu, jeho hodnota se považuje za pravdivou . Absence atributu znamená, že jeho hodnota je nepravdivá. Nastavením hodnoty atributu disabled na prázdný řetězec ("") nastavíme disabled na true , což má za následek deaktivaci tlačítka.

Metody DOM zabývající se atributy prvku:

Nejběžněji používané metody bez ohledu na jmenný prostor	Varianty s ohledem na jmenný prostor (DOM Level 2)	Metody DOM úrovně 1 pro přímé zacházení s uzly Attr (používá se zřídka)	Metody založené na jmenném prostoru DOM Level 2 pro přímé zacházení s uzly Attr (používá se zřídka)
setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute(DOM2)	hasAtributeNS	-	-
removeAttribute(DOM 1)	removeAttributeNS	removeAttributeNode	-

Specifikace

• Jádro DOM úrovně 2: setAttribute (zavedeno v jádru DOM úrovně 1)

Kompatibilita s prohlížečem

Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud byste chtěli přispět k datům, podívejte se na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.

Aktualizujte údaje o kompatibilitě na GitHubu

	plocha počítače						mobilní, pohybliví
	Chrome	okraj	Firefox	internet Explorer	Opera	safari	android webview	Chrome pro Android	Firefox pro Android	Opera pro Android	Safari na iOS	Internet Samsung
setAttribute	Plná podpora ChromeAno	Plná podpora Edge 12	Plná podpora Firefoxu Ano	Plná podpora IE 5 poznámky Plná podpora 5 poznámky poznámky V aplikaci Internet Explorer 7 a dřívějších verzích nenastavuje setAttribute styly a odebírá události, když se je pokusíte nastavit.	Opera Plná podpora Ano	Safari Plná podpora 6	WebView Plná podpora Androidu Ano	Chrome Plná podpora Androidu Ano	Firefox Plná podpora Androidu Ano	Opera Android Plná podpora Ano	Safari iOS Plná podpora Ano	Samsung Internet Android Plná podpora Ano

Legenda

Plná podpora Plná podpora Viz poznámky k implementaci. Viz poznámky k implementaci.

Gecko poznámky

Použití setAttribute() k úpravě určitých atributů, zejména hodnoty v XUL, funguje nekonzistentně, protože atribut určuje výchozí hodnotu. Chcete-li získat přístup k aktuálním hodnotám nebo je upravit, měli byste použít vlastnosti. Například použijte Element.value místo Element.setAttribute() .