Ez a lecke a jQuery elemattribútumainak beolvasásáról és módosításáról szól.

Az attribútumok egy név/érték pár, amely a címke elemeihez van hozzárendelve. Példák attribútumokra ( href, cím, src, osztály):

• attr() attribútumok olvasásához, hozzáadásához és módosításához
• removeAttr() attribútumok eltávolításához

Ez a lecke az attr() és removeAttr() metódusokkal foglalkozik.

A CSS-osztályokkal való együttműködéshez speciális jQuery metódusok, amelyeket egy másik leckében ismertetünk. Amikor a jQuery projekten dolgozik, gyakran kell manipulálnia a CSS osztályokat, és osztály attribútuma több osztálynevet is tartalmazhat, ami sokkal nehezebbé teszi a munkát, mint más attribútumokkal.

Ha beviteli mezőértékekkel dolgozik, jobb a val() metódus használata, amely nem csak az érték attribútum egyszerűsített változatát adja meg, hanem be tudja olvasni és be tudja állítani az értékeket a kiválasztott elemeiben. lista kiválasztása.

Egy attribútum értékének beolvasása

Egy elemattribútum értékének kiolvasása egyszerű. Mindössze annyit kell tennie, hogy meghívja az attr() metódust az elemet tartalmazó jQuery objektumon, és átadja neki az attribútum nevét az olvasáshoz. A metódus az attribútum értékét adja vissza:

// Megjeleníti a #myLink elem figyelmeztetés "href" attribútumának értékét ($("a#myLink").attr("href"));

Ha a jQuery objektum több elemet tartalmaz, az attr() metódus csak a készlet első elemének attribútumértékeit olvassa be.

Attribútumértékek beállítása

Az attr() metódus használható attribútumértékek hozzáadására vagy módosítására is:

• Ha attribútum nem létezik az elemben ez lesz tette hozzáés a megadott érték lesz hozzárendelve.
• Ha attribútum már létezik, értéke lesz frissítveérték beállítása.

Háromféleképpen használhatja az attr() metódust attribútumok hozzáadásához vagy módosításához:

1. Bármely elemhez (vagy elemkészlethez) hozzáadhat/módosíthat attribútumokat.
2. Egy elemhez (vagy elemekhez) egyszerre több attribútumot is hozzáadhat/módosíthat az attribútumnevek és -értékek térképének megadásával.
3. lehetőség van egy attribútum dinamikus hozzáadására/módosítására több elemhez egy visszahívási funkció segítségével.

Állítson be egy attribútumot

Egy elem attribútumának beállításához vagy módosításához hívja meg az attr() metódust az attribútum nevével és értékével. Például:

// Módosítsa a #myLink elem "href" attribútumának értékét a következőre: "http://www.example.com/" // (ha a "href" attribútum nem létezik, akkor automatikusan létrejön) $( "a#myLink"). attr("href", "http://www.example.com/");

Ugyanazt az attribútumot több elemre is beállíthatja:

Több attribútum beállítása térkép segítségével

Egy térkép segítségével egyszerre több attribútumot is beállíthat egy vagy több elemhez. Ez egy név/érték párok listája, amely így néz ki:

( név1: érték1, név2: érték2, ... )

A következő példa egyszerre két attribútumot állít be az img elemen:

// Állítsa be az "src" és "alt" attribútumot az img elemhez #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;

Több elemhez is beállíthat attribútumokat:

// Az "src" és "alt" attribútumok beállítása az összes img elemhez $("img").attr(( "src": "mypic.jpg", "alt": "Saját fénykép" ));

Attribútumok beállítása visszahívási funkcióval

Ahelyett, hogy attribútumértékeket adna át az attr() metódusnak, átadhatja a visszahívási függvény nevét. Így dinamikusan állíthat be attribútumértékeket több elemhez az elem pozíciója, meglévő attribútumértéke vagy egyéb tulajdonságai szerint.

A return függvénynek két argumentumot kell tartalmaznia:

• Az aktuálisan kiválasztott elem pozíciójának indexe a készletben (nulla alapú)
• az aktuálisan kiválasztott elem régi attribútumértéke

A függvény visszatérési értéke az attribútum értékének helyettesítésére szolgál.

Az elem jelenlegi pozíciója és az attribútum régi értéke mellett a függvény magát az elemet is elérheti a kulcsszó használatával. Így egy elem bármely tulajdonságát vagy metódusát elérheti a visszahívási függvényből.

A példa visszahívást használ, hogy az oldalon lévő minden képhez egy alt attribútumot adjon a kép pozíciója és src attribútuma alapján:

A kód végrehajtása után az első kép „Picture 1: myphoto.jpg” értékű alt attribútummal, a második kép pedig „Picture 2: yourphoto.jpg” értékű alt attribútummal rendelkezik.

Egy attribútum törlése

Attribútum elemből való eltávolításához hívja meg a removeAttr() metódust, és adja át neki az eltávolítandó attribútum nevét. Például:

// Távolítsa el a "title" attribútumot a #myLink elemből $("a#myLink").removeAttr("title");

A removeAttr() metódust több elemet tartalmazó jQuery objektumon is meghívhatja. A removeAttr() metódus eltávolítja az adott attribútumot az összes elemből:

// Távolítsa el a "title" attribútumot az összes hivatkozásból $("a").removeAttr("title");

Összegzés

Ebben az oktatóanyagban a jQuery elemattribútumainak kezelésével kapcsolatos kérdéseket tárgyaltuk:

• Attribútumértékek olvasása
• Egy attribútum beállítása
• Több különböző attribútum beállítása egyszerre
• Visszahívási függvény használata attribútumértékek dinamikus beállításához egy elemkészletben
• Attribútumok eltávolítása egy elemből

A lecke a téma kezdetét fedi le: a dokumentumobjektum-modell (javaScript DOM) a dinamikus HTML alapja, az objektumokhoz való hozzáférési módszereket tanulmányozzuk, és átgondoljuk a javascript események kezelésének módjait.

• Általában egy tárgy egy összetett adattípus, amely sok értéket egyesít egy közös modulba, és lehetővé teszi az értékek mentését és kérésre a nevük alapján történő lekérését.

Korábban már elkezdtünk javascriptben ismerkedni a fogalommal.

• A javascriptben van olyan, hogy DOM - Dokumentum objektum modell- egy weblap objektummodellje (html oldal).
• A dokumentumcímkék vagy, ahogy mondani szokták, a dokumentum csomópontjai az objektumai.

Nézzük a diagramot objektum hierarchia JavaScriptben, és hol található a hierarchiában a kérdéses dokumentumobjektum.

A script elem attribútumokkal rendelkezik:

elhalasztani (várja meg, amíg az oldal teljesen betöltődik).

Példa:

A dokumentum objektum tulajdonságai és attribútumai JavaScriptben

A dokumentum objektum egy weboldalt képvisel.

Fontos: Egy objektum tulajdonságainak és metódusainak eléréséhez JavaScriptben, más objektumokhoz hasonlóan, pont jelölést használunk:

azok. először magát az objektumot írjuk be, majd annak tulajdonságát, attribútumait vagy metódusát ponttal és szóközök nélkül jelöljük

object.property object.attribute object.method()

Vegyünk egy példát:

Példa: legyen a html dokumentumnak címkéje

és kifejezetten rá css stílusban(akár két stílus is, a második a feladathoz hasznos):

Szükséges:

1. állítson be egy új objektumtulajdonságot, rendeljen hozzá értéket, és adja ki azt az értéket;
2. egy objektum attribútum értékének megjelenítése;
3. megváltoztatja egy objektum attribútumának értékét.

Végezzük el a feladatot sorrendben:
✍ Megoldás:

Azóta javascript nyelv, akkor az objektum feltalálható és tetszőleges értékű tulajdonság beállítható. De először férjünk hozzá az objektumhoz (az objektumhoz való hozzáférésről ebben a leckében később részletesen lesz szó):

// hozzáférést kap az objektumhoz az azonosítójával var element = document.getElementById("MyElem"); elem.sajatTulajdonság = 5; // tulajdonság hozzárendelése alert(element.myProperty); // megjelenítése a párbeszédpanelen

A következő feladat az objektum attribútumhoz kapcsolódik. Objektum attribútum címke attribútumok. Azok. esetünkben ebből kettő van: a small értékű class attribútum és az id attribútum. A class attribútummal fogunk dolgozni.

Most adjunk hozzá néhány javascript kódot az objektum attribútumának értékének megjelenítéséhez. A kódnak lennie kell után fő címkék:

// hozzáférést kap az objektumhoz az azonosítójával var element = document.getElementById("MyElem"); alert(element.getAttribute("osztály")); // megjelenítése a párbeszédpanelen

És az utolsó feladat: az attribútum értékének megváltoztatása. Ehhez készítettünk egy stílust nagy. Módosítsa az osztály attribútum értékét erre a stílusra:

// hozzáférést kap az objektumhoz az azonosítójával var element = document.getElementById("MyElem"); element.setAttribute("osztály","nagy");

Ennek eredményeként az elemünk nagyobb lesz és kék lesz (osztálynagy).

Most nézzük meg közelebbről a példában használt módszereket az attribútumokkal való munkavégzéshez.

Attribútumok manipulálásának módszerei JavaScriptben

Az attribútumok hozzáadhatók, eltávolíthatók és módosíthatók. Erre vannak speciális módszerek:

• Attribútum hozzáadása (új érték beállítása):

getAttribute(attr)

• Ennek az attribútumnak a meglétének ellenőrzése:

RemoveAttribute(attr)

Az attribútumokkal való munka különböző módjai

Példa: Nyomtassa ki a szövegblokk érték attribútumának értékét.

✍ Megoldás:

• Legyen egy szövegblokk:

varelem = document.getElementById("SajátElem"); var x = "érték";

• Tekintsünk több módot egy attribútum értékének megszerzésére (kimenethez, használathoz riasztási módszer()):

elem.getAttribute("érték")

elem.getAttribute("érték")

2. pont jelölés:

elem.attribútumok .érték

elem.attributes.value

3. zárójeles jelölés:


Állítsa be az attribútumértékeket Többféleképpen is megteheti:

var x = "kulcs"; // kulcs - attribútum neve, val - attribútum értéke // 1. elem.setAttribute("kulcs", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" kulcs "] = "val" // 4. elem.setAttribute(x, "val")

testelem tulajdonságai

A dokumentum objektumon keresztül elérheti a dokumentum törzsét - a body taget - annak néhány hasznos tulajdonságával.

Például a body címkének két tulajdonsága van: ügyfélablak szélessége és magassága:

document.body.clientHeight – ügyfélablak magassága
document.body.clientWidth - az ügyfélablak szélessége


De a legfontosabb, ahogy azt már megtudtuk, hogy a dokumentum objektumon keresztül, speciális metódusokon keresztül minden oldalelemhez, azaz címkéhez hozzá lehet férni.

Fontos: Az ilyen oldalcímkék elérésekor a szkriptnek az elemfa végén, a záró törzs előtt kell lennie! Mivel mire a szkript lefut, a böngészőnek már minden elemet „meg kell rajzolnia” a képernyőn

Munka js8_1. Nyomtasson ki egy üzenetet a böngészőablak méretéről: pl. "böngésző ablak mérete 600 x 400"

Dokumentumelemek elérése javaScriptben

Számos lehetőség van az objektumok elérésére vagy az objektumok keresésére:

1. Keresés azonosító alapján(vagy getElementById metódus), egy adott elemet ad vissza
2. Keresés címkenév alapján(vagy a getElementsByTagName metódus) egy elemtömböt ad vissza
3. Keresés név attribútum alapján(vagy a getElementsByName metódus), egy elemtömböt ad vissza
4. Szülőelemeken keresztül(minden leszármazottat megkap)

Tekintsük részletesebben az egyes lehetőségeket.

1. Elem elérése az id attribútumon keresztül

Szintaxis: document.getElementById(id)

A getElementById() metódus magát az elemet adja vissza, amely azután adatok elérésére használható

Példa: Az oldalon van egy szövegmező az id="cake" attribútummal:

...

Szükséges



✍ Megoldás:

alert(document.getElementById("torta").value); // visszaadja a "sütemények számát"

Ugyanezt megteheti egy objektumhívás megvalósításával változón keresztül:

var a=document.getElementById("torta"); alert(a.value); // kiadja a value attribútum értékét, azaz. szöveg "sütemények száma"

Fontos: A szkriptet a címke után kell elhelyezni!

Elemek tömbjének elérése a névcímke nevén és a tömbindexen keresztül

Szintaxis:
document.getElementsByTagName(név);

Példa: Az oldalon van egy szövegmező (beviteli címke) érték attribútummal:

...

Szükséges: kiírja az érték attribútuma értékét

A getElementsByTagName metódus az összes bemeneti elemhez való hozzáférést egy változón (pl. elemek tömbjéhez input), még akkor is, ha ez az elem az egyetlen az oldalon. Egy adott elemre való hivatkozáshoz, például az elsőre, adjuk meg az indexét (a tömb nulla indexről indul).

✍ Megoldás:

Egy adott elemre való hivatkozás index szerint:

var a =document.getElementsByTagName("input"); alert(a.value); // visszaadja a "sütemények számát"

Elemek tömbjének elérése a name attribútum értékével

Szintaxis:
document.getElementsByName(név);

A getElementsByName("...") metódus tér vissza objektumok tömbje, amelynek name attribútuma megegyezik a metódusparaméterként megadott értékkel. Ha csak egy ilyen elem van az oldalon, akkor a metódus akkor is egy tömböt ad vissza (csak egyetlen elemmel).

Példa: Tegyük fel, hogy van egy elem a dokumentumban:

var element = document.getElementsByName("Saját elem"); figyelmeztetés(elem.érték);

NÁL NÉL ezt a példát csak egy elem van, de a hivatkozás a tömb nulla elemére vonatkozik.

Fontos: A módszer csak azokkal az elemekkel működik, amelyekhez a név attribútum kifejezetten szerepel a specifikációban: ezek a form , input , a , select , textarea címkék és számos más ritkább címke.

A document.getElementsByName metódus nem működik más elemeken, például div , p stb.

Hozzáférés a szülő elem gyermekeihez

Gyermekek elérése javascriptben a childNodes tulajdonságon keresztül történik. A tulajdonság a szülőobjektumhoz tartozik.

document.getElementById (szülő) .childNodes ;

document.getElementById(parent).childNodes;

Tekintsünk egy példát, ahol a képcímkék egy tárolóba, egy div címkébe vannak csomagolva. Így a div címke ezeknek a képeknek a szülője, maguk az img címkék pedig a div címke leszármazottai:

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

Most adjuk ki modális ablak tömbelemértékek leszármazottaival, pl. img címkék:

var myDiv=document.getElementById("div_for_img"); // szülőtároló elérése var childMas=myDiv.childNodes; // gyermektömb a következőhöz: (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Ne feledje, hogy kényelmes ciklust használni egy gyermektömb elemei közötti iterációhoz. Azok. példánkban egy ciklust kapunk:

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

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

Az elemek elérésének egyéb módjai

Fontolja meg más módszereket Például:

<test> <formname="f"> <input type="text" id="t"> <input type = "button" id = "b" value = "(!LANG:button" > !} <válassza az id="s" name="ss"> lehetőséget <opció azonosítója = "o1" > 1</opció> <opció azonosítója = "o2" > 3</opció> <opció azonosítója = "o3" > 4</opció> </select> </form>

1 3 4

Hozzáférés:

... // nem kívánt és elavult elemelfogadók: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // szöveges figyelmeztetés(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // gomb alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ); o2 // előnyben részesített elem-elfogadók alert(document.getElementById("t" ) .type ) ; // szöveges figyelmeztetés(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // négy...

... // nem kívánt és elavult elemelfogadók: alert(document.forms.name); // f alert(document.forms.elements.type); // szöveges figyelmeztetés(document.forms.elements.options.id); // o2 alert(document.f.b.type); // gomb figyelmeztetés(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // preferált elem-elfogadók alert(document.getElementById("t").type); // szöveges figyelmeztetés(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // négy...

Példa: Hozzon létre egy gombot és egy szövegmezőt egy html dokumentumban. Egy szkript segítségével színezze ki a gomb hátterét (a gomb style.backgroundColor tulajdonsága), és jelenítsen meg egy feliratot "Szia!" a szövegmezőben (érték attribútum).

Html kód:

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

2. lehetőség:

document.getElementById ("t1" ) .setAttribute ("érték" , "Szia!" ) ; document.getElementById("b1" ) .style .backgroundColor = "piros" ;

document.getElementById("t1").setAttribute("value","Szia!"); document.getElementById("b1").style.backgroundColor = "piros";

Js8_2 feladat. Készítsen szövegmező címkéket az ábra képének megfelelően. Adja meg nekik a megfelelő (az ábrán látható) id attribútumértékeket. A szkript segítségével adja hozzá a "0" értéket az összes numerikus mezőhöz (numerikus értékeket feltételezve)

Űrlapadatok megadásának helyességének ellenőrzése

Üresen maradt a mező?

A felhasználó által megadott adatokban nem lehet megbízni. Ésszerűtlen azt feltételezni, hogy a felhasználók ellenőrizni fogják ezeket az adatok megadásakor. Tehát ehhez javascriptet kell használni.

Annak érdekében, hogy ellenőrizze üres a szövegmező(például miután a felhasználó kitöltötte egy kérdőív adatait) érdemes hivatkozni az érték tulajdonságra. Ha a tulajdonság értéke egy üres karakterlánc (""), akkor erről valahogy értesítenie kell a felhasználót.

if(document.getElementById("name").value=="") (egyes műveletek, például egy üzenet megjelenítése a mező kitöltésének követelményével );

Ezenkívül script nélkül is megteheti. Címke szövegbevitel a mezőknek minta attribútumuk van. ahogy az értéke fel van tüntetve reguláris kifejezés a megadott űrlap szövegmezőjében lévő adatok érvényesítésére. Ha az attribútum jelen van minta, akkor az űrlapot addig nem küldi el, amíg a szövegmezőt megfelelően ki nem tölti.
Például annak ellenőrzéséhez, hogy egy mező üresen maradt-e:

Számérték helyett szöveg: az isNaN függvény

Ha a mező az számérték beírása, és helyette a felhasználó szöveget ír be, az isNaN függvényt kell használni (angol nyelvből. – Nem szám?), amely ellenőrzi a bemenet típusát, és igaz értéket ad vissza, ha a bemenet numerikus helyett szöveg.

Hogy. ha true értéket ad vissza, akkor a felhasználót a megfelelő formátum megadására kell kérni, pl. szám.

if(isNaN(document.getElementById("percek").value))( Figyelmeztetés, amely számadatok megadására kéri );

Adott egy oldal kitöltendő elemekkel:


Töredék html kódot:

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

<forma > Név:<input type="text" id="name"> A fánkok száma:<input type="text" id="donuts" > Percek:<input type="text" id="percek"> Részösszeg:<input type="text" id="subitog" > Adó:<input type="text" id="tax"> Eredmény:<input type="text" id="total"> <input type = "submit" value = "(!LANG:submit" onclick = "placeOrder();" > !} </form> <script type="text/javascript"> ... </script>

Név:
A fánkok száma:
Percek:
Részösszeg:
Adó:
Eredmény:

Szükséges:
Töltse ki az üres mezőket az alábbi kódrészletben, amely ellenőrzi, hogy két szövegmező megfelelően van-e kitöltve: név(id="név") és percek(id="perc"). Használjon pipát a mező üresen hagyásához ("") és a numerikus mező kitöltésének megfelelő formátumához (isNaN).

* Végezze el a munkát a szövegmezők minta attribútumával is a használatával.

Szkriptrészlet:

A kódban használják az építéshez nehéz körülmények korábban múlt el.

Egy új koncepció az Ön számára, hogy egy függvényt gombesemény-kezelőként hív meg:
onclick="placeOrder();"
Amikor a gombra kattintunk, a placeOrder() függvény meghívódik.

Ebben a cikkben megismerkedünk a DOM tulajdonságokkal és attribútumokkal, megvizsgáljuk, miben különböznek egymástól, és hogyan kell helyesen dolgozni velük. Nézzük meg, milyen módszerekkel hajt végre műveleteket a JavaScript attribútumokon.

Miben különbözik egy attribútum egy DOM tulajdonságtól?

Az attribútumok olyan HTML-entitások, amelyekkel a HTML-kód elemeihez hozzáadhatunk bizonyos adatokat.

Amikor egy böngésző lekér egy oldalt, megkapja a forrás HTML kódját. Ezt követően elemzi ezt a kódot, és egy DOM-ot épít az alapján. E folyamat során A HTML elem attribútumait a rendszer a megfelelő DOM tulajdonságaikra fordítja le.

Például a böngésző a következő HTML kódsor olvasásakor a következő DOM-tulajdonságokat hozza létre ehhez az elemhez: id , className , src és alt .

Ezek a tulajdonságok JavaScript-kódban érhetők el, mint az objektum tulajdonságai. Az objektum itt egy DOM csomópont (elem).

Példa, ahol megkapjuk a fenti elem DOM tulajdonságainak értékeit, és kinyomtatjuk az értékeket a konzolra:

// az elem lekérése var brandImg = document.querySelector("#brand"); // megjeleníti az elem DOM tulajdonságainak értékét console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.svg?2" console.log(brandImg.alt); // "webhely logója"

Néhány DOM-tulajdonságnév nem egyezik az attribútumnevekkel. Ezek egyike az osztály attribútum. Ez az attribútum a DOM className tulajdonságnak felel meg. Ez a különbség abból adódik, hogy az osztály az kulcsszó JavaScriptben le van foglalva és nem használható. Emiatt a szabvány fejlesztői úgy döntöttek, hogy valamilyen más nevet használnak az illesztéshez, amelyet className néven választottak.

Egy másik árnyalat azzal a ténnyel kapcsolatos, hogy a HTML-attribútumok fordítása a forráskód dokumentum, a DOM-tulajdonságok nem mindig egy az egyhez valósulnak meg.

Ha egy elemnek nem szabványos HTML attribútuma van, akkor a DOM-ban nem jön létre a hozzá tartozó tulajdonság.

Egy másik különbség, hogy bizonyos HTML-attribútumok értéke és a hozzájuk tartozó DOM-tulajdonságok eltérőek lehetnek. Azok. egy attribútumnak lehet egy értéke, a belőle létrehozott DOM tulajdonságnak pedig egy másik értéke.

Az egyik ilyen attribútum be van jelölve.

Az ellenőrzött HTML attribútum értéke ebben az esetben az üres karakterlánc. De a DOM-ban ennek az attribútumnak megfelelő tulajdonság true értékre lesz állítva. Mert a szabvány szabályai szerint, hogy igaz legyen, elég csak megemlíteni ezt az attribútumot a HTML kódban, és nem mindegy, milyen értéke lesz.

Ebben az esetben, ha a checkbox típusú bemeneti elemnél nem is adjuk meg a checked attribútumot a HTML kódban, akkor is a DOM-ban létrejön hozzá a bejelölt tulajdonság, de ez egyenlő lesz a false -val.

Ezenkívül a JavaScript lehetővé teszi az attribútumokkal való munkát is. A DOM API-ban erre speciális módszerek vannak. Ezeket azonban csak akkor célszerű használni, ha valóban ilyen módon kell dolgoznia az adatokkal.

Ebben az esetben tudnia kell, hogy amikor megváltoztatjuk egy elem DOM tulajdonságát, akkor a hozzá tartozó attribútum is megváltozik, és fordítva. De ezt a folyamatot a böngészőkben nem mindig hajtják végre egytől egyig.

A fő különbségek a DOM tulajdonságok és attribútumok között a következők:

• az attribútum értéke mindig egy karakterlánc, a DOM tulajdonság értéke pedig egy adott adattípus (nem feltétlenül karakterlánc);
• az attribútum neve nem különbözteti meg a kis- és nagybetűket, a DOM-tulajdonságok pedig megkülönböztetik a kis- és nagybetűket. Azok. a HTML kódban például beírhatjuk a HTML attribútum azonosítóját Id , ID stb. Ugyanez vonatkozik az attribútum nevére is, amelyet speciálisban adunk meg JavaScript metódusok dolgozni vele. De a megfelelő DOM tulajdonságot csak id-vel érhetjük el, semmi mással.

Egy elem DOM tulajdonságaival való munka

A JavaScript elemeinek tulajdonságaival való munka, amint azt fentebb megjegyeztük, ugyanúgy történik, mint az objektumok tulajdonságaival.

De ahhoz, hogy valamely elem tulajdonságára hivatkozhassunk, először meg kell szerezni. Beszerezhet egy DOM-elemet a JavaScript-ben például az általános querySelector metódussal, és DOM-elemek gyűjteményét például a querySelectorAll használatával.

Első példaként vegye figyelembe a következő HTML-elemet:

Ennek alapján elemezzük, hogy a DOM-tulajdonságokat hogyan kapjuk meg, változtassuk meg, és hogyan adjunk hozzá újakat.

DOM tulajdonság értékeinek olvasása:

// az id tulajdonság DOM értékének lekérése var alertId = alert.id; // "alert" // a DOM tulajdonság értékének lekérése className var alertClass = alert. className; // "alert alert-info" // a cím tulajdonság DOM értékének lekérése var alertId = alert. title; // "Tippszöveg..."

DOM tulajdonságértékek módosítása:

// egy DOM tulajdonság értékének módosításához csak új értéket kell hozzárendelnie alert.title = "(!LANG:New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM tulajdonságok hozzáadása:

Alert.lang = "ru"; // a lang tulajdonság beállítása "ru"-ra alert.dir = "ltr"; // állítsa be a dir tulajdonságot "ltr"-re

Példa, amelyben kiadjuk a konzolra az összes olyan osztályértéket, amely p elemekkel rendelkezik az oldalon:

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

Példa, amelyben az összes tartalomosztályú elem lang tulajdonságát "ru"-ra állítottuk:

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

Az elemek attribútumai és a velük való munkavégzés módszerei

Az attribútumok kezdetben a HTML-kódban vannak beállítva. Bár valamilyen módon összefüggenek a tulajdonságokkal, nem ugyanazok. A legtöbb esetben a tulajdonságokkal kell dolgoznia, és csak akkor érheti el az attribútumokat, amikor valóban szüksége van rá.

Az attribútumértékek, a DOM-tulajdonságokkal ellentétben, mint fentebb megjegyeztük, mindig karakterláncok.

A JavaScript négy módszerrel rendelkezik az attribútumokhoz kapcsolódó műveletek végrehajtására:

• .hasAttribute("attribútum_neve") – ellenőrzi, hogy az elem rendelkezik-e a megadott attribútummal. Ha az ellenőrzött attribútum az elemen van, akkor ez a módszer igazat ad vissza, egyébként false-t.
• .getAttribute("attribútum_neve") – Lekéri az attribútum értékét. Ha az elem nem rendelkezik a megadott attribútummal, akkor ez a metódus üres karakterláncot ("") vagy null értéket ad vissza.
• .setAttribute("attribútum_neve", "attribútum_értéke") – beállítja a megadott attribútumot a megadott értékkel az elemhez. Ha az elem rendelkezik a megadott attribútummal, akkor ez a metódus egyszerűen megváltoztatja az értékét.
• .removeAttribute("attribútum_neve") – eltávolítja a megadott attribútumot az elemből.

Vegye figyelembe a példákat.

Magasan érdekes példa az érték attribútummal.

Példa érték attribútummal

Szerezze meg a value attribútum értékét és a value DOM tulajdonságot:

// a name elem value attribútuma értékének lekérése.getAttribute("value"); // "Bob" // a DOM tulajdonság értékének lekérése value name.value; // "Bob" // a value attribútum értékének frissítése, új érték beállítása name.setAttribute("value", "Tom"); // "Tom" // a tulajdonságérték DOM értékének lekérése name.value; // "Tom"

Ez a példa azt mutatja, hogy amikor az érték attribútum megváltozik, a böngésző ennek megfelelően automatikusan módosítja a DOM tulajdonság értékét.

Most tegyük meg az ellenkezőjét, nevezetesen változtassuk meg a DOM tulajdonság értékét, és ellenőrizzük, hogy változik-e az attribútum értéke:

// állítson be új értéket a DOM tulajdonság értékére name.value = "(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

Ez a példa azt mutatja, hogy egy DOM tulajdonság megváltoztatása nem mindig eredményez megfelelő változást az attribútumban. Azok. ebben az esetben a DOM tulajdonság értékének megváltoztatása nem változtatja meg a megfelelő attribútumot.

Ugyanez történik, amikor a felhasználó szöveget ír be ebbe a mezőbe. Az érték DOM tulajdonság a tényleges értéket fogja tartalmazni, a megfelelő attribútum pedig az eredeti értéket vagy azt, amelyet például a setAttribute metódussal beállítunk.

Ez a példa azt mutatja, hogy helyesebb mindig a DOM-tulajdonságokkal dolgozni, és csak akkor kell hozzáférnie az attribútumhoz, amikor valóban szükséges.

Még abban az esetben is használhatja a tulajdonságot, ha meg kell kapnia a HTML-ben beállított kezdeti értéket. A value attribútum kezdeti értékét tartalmazó tulajdonságot defaultValue-nak nevezzük.

Name.defaultValue; // Tom

Egy másik nagyon érdekes példa, de most a href attribútummal.

href példa

Egy példa, ahol meg kell kapnunk a hivatkozás értékét, ahogy az a HTML-ben volt beállítva.

Ebben a példában a href attribútum és a href DOM tulajdonság tartalmazza különböző jelentések. A href attribútumot állítjuk be a kódban, a DOM tulajdonság pedig a teljes URL-t. Ezt a különbséget az a szabvány diktálja, hogy a böngészőnek a href értéket kell adnia a teljes URL-re.

Ezért, ha meg kell szereznünk azt, ami az attribútumban van, akkor ebben az esetben nem nélkülözhetjük a getAttribute metódust.

Végül vessünk egy pillantást a kiválasztott attribútumra.

Válogatott példa

Egy példa, amely bemutatja, hogyan kaphatja meg a kiválasztott kiválasztási opció értékét:

nincs minősítés 1 2 3 4 5

Példa, amely bemutatja, hogyan kaphatja meg a kiválasztott opcióértékeket egy kiválasztott elemben:

nincs minősítés 1 2 3 4 5

Az attribútumokkal való munka másik módja (attributes property)

A JavaScriptben minden elem rendelkezik egy attribútum tulajdonsággal, amellyel az összes attribútuma lekérhető NamedNodeMap objektumként.

Ez a módszer akkor használható, ha például egy elem összes attribútuma át kell iterálnia.

A gyűjtemény egyik attribútuma az indexével vagy az item metódussal érhető el. A gyűjtemény attribútumai 0-tól számítanak.

Például jelenítsük meg a konzol valamelyik elemének összes attribútumait:

IMÁDOM JAVASCRIPT

Kívül, Ezzel a gyűjteménnyel a következő módszerekkel is dolgozhat:

• .getNamedItem("attribútum_neve") – lekéri a megadott attribútum értékét (ha a megadott attribútum nem létezik az elemen, akkor az eredmény null lesz).
• .setNamedItem("item attribútum") – új attribútumot ad hozzá egy elemhez, vagy frissíti egy meglévő értékét. Attribútum létrehozásához a document.createAttribute() metódust kell használni, amelynek paraméterként át kell adni az attribútum nevét. Ezt követően a létrehozott attribútumhoz értéket kell rendelni a value tulajdonság segítségével.
• .removeNamedItem("attribútum_neve") – eltávolítja a megadott attribútumot az elemből (eredményként az eltávolított attribútumot adja vissza).

Példa az attribútumok használatára a getNamedItem, setNamedItem és removeNamedItem metódusokon keresztül:

IMÁDOM JAVASCRIPT

Feladatok

• Nyomtasson ki a konzolra minden olyan dokumentumelemet, amely rendelkezik id attribútummal.
• Adjon hozzá egy title attribútumot az oldalon lévő összes képhez, ha nem rendelkezik ezzel az attribútummal. Attribútum érték beállítása egyenlő az értékkel alt attribútum.

Létrehozhat egyéni kötést kötések, amely ellenőrzi egy adott megfigyelhető értékét logikai érték attribútumok hozzáadása vagy nem hozzáadása előtt. Lásd ezt a példát:

Ko.bindingHandlers.attrIf = ( frissítés: függvény (elem, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(elem, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(elem).removeAttr(k); ) ) ) ) ); link

Bárcsak válaszolhatnék @gbs-nek, de nem tudok. Az én megoldásom az lenne, hogy két egyforma legyen HTML elem: egy attribútummal, nélküle és egy kiütési feltétellel, hogy egyet hozzáadjunk az elemhez. Én is tisztában vagyok ezzel a szokásos várakozással, de melyik megoldás a hatékonyabb?

Beállítja egy attribútum értékét a megadott elemen. Ha az attribútum már létezik, az érték frissül; ellenkező esetben egy új attribútum kerül hozzáadásra a megadott névvel és értékkel.

Szintaxis

elem.setAttribute( név, érték);

Paraméterek

name Egy DOMString, amely megadja annak az attribútumnak a nevét, amelynek értékét be kell állítani. Az attribútumnév automatikusan csupa kisbetűsre változik, amikor a setAttribute() meghívásra kerül egy HTML-dokumentum HTML-elemén. érték Az attribútumhoz rendelendő értéket tartalmazó DOMString. A megadott nem karakterlánc-értékek automatikusan karakterláncokká alakulnak.

A logikai attribútumok akkor tekinthetők igaznak, ha "egyáltalán jelen vannak az elemen, függetlenül a tényleges értéküktől ; általában meg kell adni az üres karakterláncot ("") az értékben (egyesek az attribútum nevét használják; ez működik, de nem szabványos). Tekintse meg az alábbi gyakorlati bemutatót.

Mivel a megadott érték karakterláncsá alakul, a null megadása nem feltétlenül azt jelenti, amit vársz. Ahelyett, hogy eltávolítaná az attribútumot, vagy nullára állítaná az értékét, az attribútum értékét a "null" karakterláncra állítja be. Ha el szeretne távolítani egy attribútumot, hívja a removeAttribute() függvényt.

visszatérési értéket

Kivételek

InvalidCharacterError A megadott attribútumnév egy vagy több olyan karaktert tartalmaz, amelyek nem érvényesek az attribútumnevekben.

példa

A következő példában a setAttribute() attribútumok beállítására szolgál egy .

HTML

Helló Világ

JavaScript

var b = document.querySelector("button"); b.setAttribute("név", "helloButton"); b.setAttribute("letiltva", "");

Ez két dolgot bizonyít:

• A setAttribute() fenti első hívása azt mutatja, hogy a name attribútum értéke „helloButton”-ra változik. Ezt a böngészője oldalellenőrzőjével (Chrome , Edge , Firefox, Safari) láthatja.
• Egy logikai attribútum értékének beállításához, például a tiltott , bármilyen értéket megadhat. Az üres karakterlánc vagy az attribútum neve ajánlott érték. Csak az számít, hogy ha az attribútum egyáltalán jelen van, valós értékétől függetlenülértékét igaznak tekintjük . Az attribútum hiánya azt jelenti, hogy értéke false. Ha a tiltott attribútum értékét az üres karakterláncra ("") állítjuk, akkor a tiltott értéket igazra állítjuk, ami a gomb letiltását eredményezi.

Az elemek attribútumaival foglalkozó DOM metódusok:

Nem névtér-tudatos, leggyakrabban használt módszerek	Névtér-tudatos változatok (DOM 2. szint)	1. szintű DOM módszerek az Attr csomópontok közvetlen kezelésére (ritkán használt)	DOM 2. szintű névtér-tudatos módszerek az Attr csomópontok közvetlen kezelésére (ritkán használt)
setAttribute(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
attribútum (DOM2)	hasAttributeNS	-	-
RemoveAttribute(DOM 1)	RemoveAttributeNS	RemoveAttributeNode	-

Leírás

• DOM 2. szintű mag: setAttribute (bevezetve a DOM 1. szintű magban)

Böngésző kompatibilitás

Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készült. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.

Frissítse a kompatibilitási adatokat a GitHubon

	Asztali						Mobil
	Króm	él	Firefox	internet böngésző	Opera	szafari	android webview	Chrome Androidra	Firefox Androidra	Opera Androidra	Safari iOS rendszeren	Samsung internet
setAttribute	Chrome Teljes támogatás Igen	Edge Teljes támogatás 12	Firefox Teljes támogatás Igen	IE teljes támogatás 5 jegyzetek Teljes támogatás 5 jegyzetek jegyzetek Az Internet Explorer 7 és korábbi verzióiban a setAttribute nem állít be stílusokat, és eltávolítja az eseményeket, amikor megpróbálja beállítani őket.	Opera Teljes támogatásIgen	A Safari teljes támogatása 6	WebView Android Teljes támogatás Igen	Chrome Android Teljes támogatás Igen	Firefox Android Teljes támogatásIgen	Opera Android Teljes támogatás Igen	Safari iOS Teljes támogatás Igen	Samsung Internet Android Teljes támogatás Igen

Legenda

Teljes támogatás Teljes támogatás Lásd a végrehajtási megjegyzéseket. Lásd a végrehajtási megjegyzéseket.

Gekkó megjegyzi

A setAttribute() használata bizonyos attribútumok, különösen az XUL-ban lévő értékek módosítására, következetlenül működik, mivel az attribútum az alapértelmezett értéket adja meg. Az aktuális értékek eléréséhez vagy módosításához használja a tulajdonságokat. Például használja az Element.value értéket az Element.setAttribute() helyett.