Lekce se bude týkat začátku tématu: objektový model dokumentu (javaScript DOM) je základem dynamického HTML, budou studovány metody přístupu k objektům a zváženy metody zpracování javascriptových událostí.
- Obecně je objekt složený datový typ, který kombinuje mnoho hodnot do společné jednotky a umožňuje na vyžádání ukládat a načítat hodnoty pod jejich názvy.
- V javascriptu existuje něco jako DOM - Objektový model dokumentu— objektový model webové stránky (html stránka).
- Jeho objekty jsou tagy dokumentu nebo, jak se také říká, uzly dokumentu.
Již dříve jsme se začali seznamovat s konceptem v javascriptu.
Podívejme se na schéma hierarchie objektů v JavaScriptu a kde se v hierarchii nachází objekt dokumentu popisovaný v tomto tématu.
Prvek skriptu má následující atributy:
Příklad:
/* Umožňuje paralelní načítání souborů js a jejich provádění ihned po načtení, bez čekání na zpracování zbytku stránky */ /* Umožňuje prohlížeči paralelně načítat soubory js bez zastavení dalšího zpracování stránky. Jsou popraveni po úplná analýza objektový model dokumentu */
Vlastnosti a atributy objektu dokumentu v JavaScriptuObjekt dokumentu představuje webovou stránku.
Důležité: Pro přístup k vlastnostem a metodám objektu v JavaScriptu, stejně jako při práci s jinými objekty, se používá tečková notace:
těch. nejprve je zapsán samotný objekt, poté je jeho vlastnost, atribut nebo metoda označena tečkou a bez mezer
object.property object.attribute object.method()Podívejme se na příklad:
Příklad: nechť je v html dokumentu značka
Můj živel
a specifické pro něj styl css(dokonce dva styly, druhý bude pro daný úkol užitečný):
| .small( color : red ; font-size : small; ) .big( color : blue ; font-size : big; ) |
.small( color:red; font-size:small; ) .big( color:blue; font-size:big; )
Nezbytné:
Dokončeme úkol v tomto pořadí:
✍ Řešení:
Protože se jedná o jazyk javascript, můžete objektu vytvořit a nastavit libovolnou vlastnost s libovolnou hodnotou. Nejprve však získáme přístup k objektu (přístup k objektu bude podrobně popsán později v této lekci):
// přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); element.myProperty = 5; // přiřazení vlastnosti alert(element.myProperty); // zobrazení v dialogovém okně
Další úkol souvisí s atributem objektu. Atribut objektu jsou atributy tagu. 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 kód javascript pro zobrazení hodnoty atributu našeho objektu. Kód musí být po hlavní značky:
// přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // zobrazení v dialogovém okně
A poslední úkol: změna hodnoty atributu. Máme na to styl. "velký". Nahradíme hodnotu atributu class tímto stylem:
// přístup k objektu pomocí jeho id var element = document.getElementById("MyElem"); element.setAttribute("třída","velký");
V důsledku toho se stane naším prvkem větší velikost a zmodrá (velká třída).
Nyní se blíže podíváme na metody použité v příkladu pro práci s atributy.
Atributy lze přidávat, mazat a upravovat. K tomu existují speciální metody:
- Přidání atributu (nastavení nové hodnoty):
- Kontrola přítomnosti tohoto atributu:
getAttribute(attr)
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:
- Podívejme se na několik způsobů, jak získat hodnotu atributu (pro výstup použijte metodu alert()):
var elem = document.getElementById("MyElem"); var x = "hodnota";
| elem.getAttribute("value") |
elem.getAttribute("value")
2. tečková notace:
| prvek.atributy.hodnota |
prvek.atributy.hodnota
3. zápis v závorce:
var element = document.getElementById("t1"); alert(...) element.setAttribute(...);
Hodnoty atributů můžete také nastavit několika způsoby:
var x = "klíč"; // key - název atributu, val - hodnota pro atribut // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")
Vlastnosti prvku tělaProstřednictvím objektu dokumentu můžete přistupovat k tělu dokumentu – značce body – s některými užitečnými vlastnostmi.
Například značka body má dvě vlastnosti: šířku a výšku 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, že prostřednictvím objektu dokumentu je prostřednictvím speciálních metod poskytován přístup ke všem prvkům stránky, tedy značkám.
Důležité: Při přístupu ke značkám stránky tímto způsobem musí být skript na konci stromu prvků před uzavřením těla ! 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 . Zobrazit 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 JavaScriptuExistuje několik možností, jak přistupovat k objektům nebo je vyhledávat:
Zvažme každou z možností podrobněji.
Syntaxe: 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":
...
Nutné
✍ Řešení:
alert(document.getElementById("dort").value); // vrátí "počet dortů"
Totéž můžete udělat přístupem k objektu prostřednictvím proměnné:
var a=document.getElementById("dort"); alert(a.value); // zobrazení hodnoty atributu value, tzn. text "počet dortů"
Důležité: Skript musí být umístěn za značkou!
Syntax:
document.getElementsByTagName(name);
Příklad: Stránka má textové pole (vstupní značku) s atributem value:
...
Povinné: zobrazit hodnotu atributu value
Metoda getElementsByTagName poskytuje přístup prostřednictvím proměnné ke všem vstupním prvkům (tj. poli vstupních prvků), i když je tento prvek jediný na stránce. Pro přístup ke konkrétnímu prvku, například k prvnímu, uvedeme jeho index (pole začíná indexem nula).
✍ Řešení:
- Ke konkrétnímu prvku přistupujeme pomocí indexu:
var a =document.getElementsByTagName("vstup"); alert(a.value); // vrátí "počet dortů"
Syntax:
document.getElementsByName(name);
Metoda getElementsByName("...") vrací pole objektů, jejichž 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 tomto příkladu je 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 form , input , a , select , textarea a řadu dalších, vzácnějších značek.
Metoda document.getElementsByName nebude fungovat s jinými prvky jako div , p atd.
Děti jsou přístupné v javascriptu prostřednictvím vlastnosti childNodes. Vlastnost patří nadřazenému objektu.
| document.getElementById(roditel).childNodes; |
document.getElementById(roditel).childNodes;
Podívejme se na příklad, kdy jsou značky obrázků umístěny v kontejneru zvaném div tag. Značka div je tedy rodičem dat obrázku a samotné značky img jsou tedy potomky značky 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 nadřazené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 podřízeného pole. 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); )
Podívejme se na další metody na příkladu:
| 1 3 4 |
1 3 4
Přístup:
| ... // nechtěné a zastaralé přístupové objekty prvku: alert(document.forms [ 0 ] .name ) ; // 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é metody pro přístup k prvkům 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 ) ; // 4... |
... // nechtěné a zastaralé metody přístupu k prvku: 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é metody pro přístup k prvkům 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); // 4...
Příklad: V dokumentu HTML vytvořte tlačítko a textové pole. 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 = "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ého pole, jak je znázorněno na obrázku. Přidělte jim odpovídající (zobrazené na obrázku) hodnoty atributu id. Pomocí skriptu přidejte do všech číselných polí hodnotu „0“ (za předpokladu číselných hodnot) 
Je pole prázdné?
Vstupu uživatele nelze věřit. Je nerozumné předpokládat, že uživatelé budou při zadávání dat kontrolovat data. To znamená, že k tomu musíte použít javascript.
Chcete-li zkontrolovat, zda je textové pole ponecháno prázdné (například poté, co uživatel vyplní údaje z dotazníku), měli byste se podívat 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ěkteré akce, například zobrazení zprávy s výzvou k vyplnění pole);
Navíc se obejdete bez skriptu. Vstupní značka textového pole má atribut vzor. jeho hodnota určuje regulární výraz pro kontrolu dat v daném textovém poli formuláře. Pokud je přítomen atribut vzor, pak nebude formulář odeslán, 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 pole vyžaduje zadání číselné hodnoty, ale uživatel místo toho zadá text, musí být použita funkce isNaN. "není číslo?"), která zkontroluje typ vstupních dat a vrátí hodnotu true, pokud jsou místo číselných dat zadána textová data.
Že. pokud je vráceno true, pak musí být uživatel upozorněn, aby zadal správný formát, tzn. číslo.
if(isNaN(document.getElementById("minuty").value))( výstraha vyžadující 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 | Název: Počet koblih: Minut: Souhrn: Daň: Výsledek: ... |
Název:
Počet koblih:
Minut:
Souhrn:
Daň:
Výsledek:
...
Nezbytné:
Vyplňte prázdná místa ve fragmentu kódu níže, abyste zkontrolovali, zda jsou správně vyplněna dvě textová pole: název(id="jméno") a minut(id="minuty"). Pomocí kontrol se ujistěte, že pole je ponecháno prázdné ("") a že je číselné pole vyplněno správně (isNaN).
* Proveďte úkol také s atributem vzoru textových polí pomocí .
Fragment skriptu:
Kód používá dříve naučené podmínky k vytvoření složitých podmínek.
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().
Můžete si vytvořit vlastní závazná vazba, který před přidáním nebo nepřidáním atributů zkontroluje hodnotu konkrétního pozorovatelného booleanu. 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
Kéž bych 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 běžného očekávání, ale které řešení je efektivnější?
Tento tutoriál je o čtení a změně atributů prvků v jQuery.
Atributy jsou dvojice název/hodnota, které jsou přiřazeny prvkům ve značce. Příklady atributů ( href, titul, src, třída):
Zde je souhrnný text
- attr() pro čtení, přidávání a změnu atributů
- removeAttr() pro odstranění atributů
Tato lekce se zabývá prací s metodami attr() a removeAttr().
Pro práci s CSS třídami existují speciální metody jQuery, které jsou popsány v jiné lekci. Při práci na projektu v jQuery musíte hodně manipulovat s CSS třídami a atribut class může obsahovat více názvů tříd, díky čemuž je práce s ním mnohem složitější než s jinými atributy.
Pokud budete pracovat s hodnotami vstupních polí, pak je lepší použít metodu val() , která poskytuje nejen zjednodušený způsob práce s atributem value, ale umí také číst a nastavovat hodnoty ve vybraných prvcích výběrového seznamu.
Čtení hodnoty atributuČtení hodnoty atributu prvku je jednoduché. Stačí zavolat metodu attr() na objektu jQuery, který obsahuje prvek, a předat mu název atributu ke čtení. Metoda vrací hodnotu atributu:
// Vypíše hodnotu atributu "href" výstrahy prvku #myLink ($("a#myLink").attr("href"));
Pokud váš objekt jQuery obsahuje více prvků, metoda attr() načte hodnoty atributů pouze 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 to bude přidal a bude mu přiřazena zadaná hodnota.
- Pokud atribut již existuje, jeho hodnota bude aktualizováno daná hodnota.
Existují tři způsoby, jak pomocí metody attr() přidat nebo změnit atributy:
Chcete-li nastavit nebo změnit atribut prvku, musíte zavolat metodu attr() s uvedením názvu a hodnoty atributu. Například:
// Změňte hodnotu atributu "href" prvku #myLink na hodnotu "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 pro více prvků:
Nastavení několika atributů pomocí mapyPomocí mapy můžete u jednoho nebo více prvků nastavit více atributů najednou. Toto je 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ů:
// Nastavte atributy "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ů na základě 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ě (začíná od nuly)
- stará hodnota atributu pro aktuálně vybraný prvek
Hodnota vrácená funkcí 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 prvku nebo metodě z funkce zpětného volání.
Příklad používá funkci zpětného 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:
$(init); function init() ( // Nastavení atributu "alt" pro všechny prvky "img" $("img").attr("alt", setAltText); funkce setAltText(index, atributValue) (return ("Obrázek " + (index +1) + ": " + this.src); ) ) 
Po spuštění kódu bude mít první obrázek atribut alt s hodnotou „Obrázek 1: mojefotka.jpg“ a druhý obrázek bude mít atribut alt s hodnotou „Obrázek 2: vaše fotografie.jpg“ .
Odebrání atributuChcete-li odstranit atribut z prvku, musíte zavolat metodu removeAttr() a předat 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í zadaný atribut ze všech prvků:
// Odebere atribut "title" ze všech odkazů $("a").removeAttr("title");
souhrnTato lekce se zabývala problémy práce s atributy prvků v jQuery:
- Čtení hodnot atributů
- Nastavení jednoho atributu
- Nastavení několika různých atributů najednou
- Použití funkce zpětného volání k dynamickému nastavení hodnot atributů na sadě prvků
- Odebrání atributů z prvku
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ý je rozdíl mezi atributem a vlastností DOM?Atributy jsou HTML entity, pomocí kterých můžeme přidat určitá data do prvků v HTML kódu.
Když prohlížeč požádá o stránku, obdrží zdrojový kód HTML. Poté tento kód analyzuje a na jeho základě vytvoří DOM. Během tohoto procesu jsou HTML atributy prvků převedeny do odpovídajících vlastností DOM.
Například prohlížeč 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, ve kterém získáme hodnoty vlastností DOM pro výše uvedený prvek a jejich hodnoty vydáme do konzole:
// získání prvku var brandImg = document.querySelector("#brand"); // zobrazení hodnot vlastností DOM prvku konzole console.log(brandImg.id); // "značka" console.log(brandImg.className); // "značka" console.log(brandImg.src); // "/logo.png" 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 jiný název pro shodu, který byl vybrán 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, pak se vlastnost odpovídající tomuto prvku v DOM nevytvoří.
// získání prvku mydiv = document.querySelector("#mydiv"); // získá hodnotu vlastnosti alt prvku a vypíše ji do konzole console.log(mydiv.alt); // undefined // získá hodnotu atributu alt prvku a vypíše ji do konzole console.log(mydiv.getAttribute("alt")); // "..."
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 vytvořená na jeho základě může mít jinou.
Jeden z těchto atributů je zaškrtnutý.
Hodnota kontrolovaného atributu HTML v v tomto případě je prázdný řetězec. Ale vlastnost odpovídající danému atributu v DOM bude mít skutečný. 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.
Navíc, i když u vstupního prvku s typem checkboxu nezadáme v HTML kódu atribut checked, 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. V DOM API pro to existují speciální metody. Je ale vhodné je používat pouze tehdy, když opravdu potřebujete s daty takto pracovat.
Zároveň musíte vědět, že když změníme vlastnost DOM prvku, změní se i 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 určitý datový typ (ne nutně řetězec);
- Název atributu nerozlišuje velká a malá písmena a vlastnosti DOM rozlišují malá a velká písmena. Tito. v HTML kódu můžeme například atribut HTML id napsat jako Id , ID atd. Totéž platí pro název atributu, který udáváme ve speciálních JavaScriptových metodách pro práci 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 prvků v JavaScriptu, jak je uvedeno výše, se provádí jako s vlastnostmi objektů.
Ale aby bylo možné získat přístup k vlastnosti prvku, musí být nejprve získán. Element DOM můžete získat například v JavaScriptu pomocí univerzální metody querySelector a kolekci prvků DOM například pomocí querySelectorAll .
Jako první příklad zvažte následující prvek HTML:
Text informační zprávy... var alert = document.querySelector("#alert"); // získat prvek
Na jeho základě rozebereme, jak získat vlastnosti DOM, změnit je a přidat nové.
Čtení hodnot vlastností DOM:
// získání hodnoty id vlastnosti DOM var alertId = alert.id; // "alert" // získá hodnotu vlastnosti DOM className var alertClass = alert.className; // "alert alert-info" // získá hodnotu vlastnosti DOM title var alertId = alert.title; // "Pomocný text..."
Změna hodnot vlastnosti DOM:
// chcete-li změnit hodnotu vlastnosti DOM, stačí jí přiřadit novou hodnotu alert.title = " Nový text hints"; // přiřaďte novou hodnotu vlastnosti title DOM prvku // nebo toto (protože přístup k této vlastnosti jsme již uložili do proměnné alertId) alertId = "New tooltip text"; // nebo toto (od přístup k této vlastnosti jsme již uložili do proměnné 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 vyvedeme 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 na všechny prvky s třídou obsahu s hodnotou „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 nimiAtributy 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 má prvek kontrolovaný atribut, 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.
Podívejme se na příklady.
Velmi zajímavý příklad s atributem value.
Příklad s atributem value var name = document.querySelector("input"); // získat prvekPojďme získat hodnotu atributu value a hodnotu vlastnosti 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 hodnoty vlastnosti DOM 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, konkrétně změňme hodnotu vlastnosti DOM a zkontrolujme, zda se hodnota atributu mění:
// nastavení nové hodnoty pro hodnotu vlastnosti DOM name.value = "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. Hodnota vlastnosti 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 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 použít vlastnost. Vlastnost obsahující 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 s atributem hrefPříklad, kdy potřebujeme získat hodnotu odkazu tak, jak byla nastavena v HTML.
var page2 = document.querySelector("#link"); page2.getAttribute("href"); // strana2.html strana2.href; // úplná adresa URL, například: http://localhost/page2.html
V tomto příkladu obsahují atribut href a vlastnost href DOM různé hodnoty. Atribut href je to, co jsme nastavili v kódu, a vlastnost DOM je úplná adresa URL. Tento rozdíl je dán standardem, že prohlížeč musí přeložit hodnotu href na úplnou adresu 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ívejme na vybraný atribut.
Příklad s vybraným atributemPříklad, který ukazuje, jak můžete získat hodnotu vybrané možnosti výběru:
žádné hodnocení 1 2 3 4 5 // získání prvku select var mark = document.querySelector("#mark"); // 1 cesta mark.querySelector("option:checked").value; // Metoda 2 mark.value;
Příklad, který ukazuje, jak můžete získat hodnoty vybrané možnosti v prvku select:
žádné hodnocení 1 2 3 4 5 // získání prvku select var mark = document.querySelector("#mark"); // Metoda 1 (vytvořením pole a jeho vyplněním hodnotami vybraných možností) var arr = ; for (var i = 0, délka = značka.volby.délka; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>opce.hodnota)
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 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 určitého prvku na konzoli:
MILUJU JAVASCRIPT
// získání prvku podle jeho identifikátoru message var message = document.querySelector("#message"); // získat jeho atributy var attrs = message.attributes; // projít všechny atributy pomocí cyklu (attrs.length – počet atributů) for (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;Kromě toho můžete s touto kolekcí pracovat také pomocí následujících metod:
- .getNamedItem("název_atributu") – získá hodnotu zadaného atributu (pokud zadaný atribut na prvku není, bude výsledek null).
- .setNamedItem("attribute_node") – 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. Vytvořený atribut pak musí mít přiřazenou hodnotu 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
// získání prvku podle jeho identifikátoru message var message = document.querySelector("#message"); // získat jeho atributy var attrs = message.attributes; // Úkol č. 1. Získejte hodnotu atributu id console.log(attrs.getNamedItem("id")); // Úkol č. 2. Nastavte atribut (pokud existuje, změňte jeho hodnotu, jinak přidejte novou) // vytvořte atribut style a uložte jej do proměnné attrStyle var attrStyle = document.createAttribute("style"); // přiřadit hodnotu atributu pomocí vlastnosti value attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}Ú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í. Nastavte hodnotu atributu rovnou hodnotě atributu alt.
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 zadat prázdný řetězec ("") v hodnotě (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říkladV následujícím příkladu se setAttribute() používá k nastavení atributů na .
HTML Hello World JavaScript var b = document.querySelector("tlačítko"); b.setAttribute("jméno", "helloButton"); b.setAttribute("disabled", "");To ukazuje dvě věci:
- První volání 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:
| setAttribute(DOM 1) | setAttributeNS | setAttributeNode | setAttributeNodeNS |
| getAttribute(DOM 1) | getAttributeNS | getAttributeNode | getAttributeNodeNS |
| hasAttribute(DOM2) | hasAtributeNS | - | - |
| removeAttribute(DOM 1) | removeAttributeNS | removeAttributeNode | - |
- Jádro DOM úrovně 2: setAttribute (zavedeno v jádru DOM úrovně 1)
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
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox internet Explorer Opera Safari Android webview Chrome pro Android Firefox pro Android Opera pro Android Safari na iOS Samsung Internet | |||||||||||
| Plná podpora Chrome Ano | Plná podpora Edge 12 | Plná podpora Firefoxu Ano | Plná podpora IE 5 Poznámky Plná podpora 5Pozná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 |
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 místo Element.setAttribute() použijte Element.value.