DOM' TokenList ” obsahuje mnoho vlastností nebo metod, ke kterým může koncový uživatel přistupovat podle svých požadavků. Vlastnosti a metody poskytované tímto seznamem provádějí specifické operace nad poskytnutými datovými sadami a odpovídajícím způsobem vrátí výsledek. Je to spíše jako pole, protože má různé členy, které lze vybrat podle jejich indexu a stejně jako pole je první index „ 0 “. Ale nemůžete použít metody jako ' pop()“, „push()“ nebo „join() “.
Tento blog vysvětlí fungování objektů HTML DOMTokenList pomocí JavaScriptu.
Jak pracovat s objekty JavaScript HTML DOMTokenList?
HTML DOMTokenList není sám o sobě ničím a jeho hodnota je dána vlastnostmi a metodami, které jsou v něm umístěny. Pojďme se na tyto vlastnosti a metody podívat podrobně spolu se správnou implementací.
Metoda 1: Metoda Add().
' Přidat ()“ připojí nebo přiřadí nové třídy, vlastnosti nebo jednoduché tokeny s vybraným prvkem. Jeho syntaxe je uvedena níže:
htmlElement. přidat ( oneOrMoreToken )
Jeho implementace se provádí pomocí následujícího kódu:
< hlava >
< styl >
.velikost písma{
velikost písma: velká;
}
.barva{
barva pozadí: kadetově modrá;
barva: whitesmoke;
}
< / styl >
< / hlava >
< tělo >
< h1 styl = 'color: kadetblue;' > Linux < / h1 >
< knoflík při kliknutí = 'akce()' > Zmije < / knoflík >
< p > Stisknutím výše uvedeného tlačítka použijte styling < / p >
< div id = 'vybraný' >
< p > Jsem vybraný text. < / p >
< / div >
< skript >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / skript >
< / tělo >
Vysvětlení výše uvedeného kódu je následující:
- Nejprve vyberte dvě třídy CSS “ velikost písma “ a „color“ a přiřaďte jim náhodné vlastnosti CSS jako „ font-size“, „background-color“ a „color “.
- Dále vytvořte tlačítka pomocí „< knoflík >“ tag, který vyvolá „ akce ()“ pomocí funkce „ při kliknutí “ posluchač události.
- Kromě toho vytvořte rodič „ div ” element a přiřaďte mu id „ vybraný “ a vložte do něj fiktivní data.
- Poté definujte „ akce ()” a uložte odkaz na vybraný prvek přístupem k jeho jedinečnému id.
- Nakonec použijte „ classList vlastnost ” pro přiřazení tříd a připojení “ přidat ()“ metoda. Poté předejte třídy CSS do této závorky metody a tato třída aplikuje tyto třídy na vybraný prvek.
Výstup po kompilaci výše uvedeného kódu je generován jako:
Výše uvedený gif potvrzuje, že třídy CSS byly přiřazeny k vybranému prvku prostřednictvím „ přidat ()“ metoda.
Metoda 2: Metoda Remove().
Tato metoda odstraní konkrétní třídu nebo id z jednoho nebo více vybraných prvků, jak je provedeno v níže uvedeném kódu:
< hlava >< styl >
.velikost písma {
písmo- velikost : velký;
}
. barva {
Pozadí- barva : kadetblue;
barva : bílý kouř;
}
< / styl >
< / hlava >
< tělo >
< h1 styl = 'color: kadetblue;' > Linuxhint < / h1 >
< knoflík při kliknutí = 'akce()' >Přidat< / knoflík >
< p >Stisknutím výše uvedeného tlačítka použijte styling< / p >
< div id = 'vybraný' třída = 'barva velikosti písma' >
< p > Jsem Vybraný Text .< / p >
< / div >
< skript >
funkce akce ( ) {
document.getElementById ( 'vybraný' ) .classList.remove ( 'barva' ) ;
}
< / skript >
< / tělo >
Popis výše uvedeného kódu je následující:
- Zpočátku je zde jako příklad použit kód vysvětlený ve výše uvedeném kódu.
- Zde oba „ barva ' a ' velikost písma ” třídy jsou přímo přiřazeny k vybranému prvku.
- Poté uvnitř „ akce ()“ funkce, která je vyvolána funkcí „ při kliknutí ' posluchač události ' odstranit ()“ je použita metoda tokenu.
- Tato metoda přebírá jednu nebo více tříd, které budou z vybraného prvku odstraněny. V našem případě „ barva ” třída bude odstraněna z vybraného prvku HTML.
Výstup pro výše uvedený kód se zobrazí jako:
Výše uvedený výstup ukazuje, že konkrétní třída CSS byla odstraněna z vybraného prvku pomocí metody „remove()“.
Metoda 3: Metoda Toggle().
' přepnout ()“ metoda je kombinací obou „ přidat ()' a ' odstranit ()“ metody. Nejprve přiřadí poskytnutou třídu CSS k vybranému prvku HTML a poté ji odstraní podle akcí uživatele.
< html >< hlava >
< styl >
.velikost písma {
písmo- velikost : xx-velký;
}
. barva {
Pozadí- barva : kadetblue;
barva : bílý kouř;
}
< / styl >
< / hlava >
< tělo >
< h1 styl = 'color: kadetblue;' > Linuxhint < / h1 >
< knoflík při kliknutí = 'akce()' >Přidat< / knoflík >
< p >Stisknutím výše uvedeného tlačítka použijte styling< / p >
< div id = 'vybraný' >
< p > Jsem Vybraný Text .< / p >
< / div >
< skript >
funkce akce ( ) {
document.getElementById ( 'vybraný' ) .classList.toggle ( 'velikost písma' ) ;
}
< / skript >
< / tělo >
< / html >
Popis výše uvedeného kódu je uveden níže:
- Je použit stejný program jako ve výše uvedené části, pouze „ přepnout ()“ se metoda nahrazuje výrazem „ odstranit ()“ metoda.
Na konci fáze kompilace bude výstup následující:
Výstup ukazuje, že konkrétní třída CSS se přidává a odebírá podle akce uživatele.
Metoda 4: Metoda obsahuje().
' obsahuje ()” metoda se používá ke kontrole dostupnosti konkrétních tříd CSS nad prvkem HTML a její implementace je uvedena níže:
< skript >funkce akce ( ) {
nechť x = dokument. getElementById ( 'vybraný' ) . classList . obsahuje ( 'velikost písma' ) ;
dokument. getElementById ( 'test' ) . vnitřní HTML = X ;
}
skript >
Část HTML a CSS zůstává stejná. Pouze v „< skript >“ se na vybraný prvek použije metoda „contains()“, aby se zkontrolovalo, zda „ velikost písma “ se na tento prvek vztahuje nebo ne. Poté se výsledek zobrazí na webové stránce na prvku HTML s id „ test “.
Po kompilaci výše uvedeného kódu vypadá webová stránka takto:
Výstup ukazuje, že hodnota „ skutečný ” je vráceno, což znamená, že na vybraný prvek HTML je použita konkrétní třída CSS.
Metoda 5: Metoda Item().
' položka ()“ metoda vybírá token nebo třídu CSS podle jejich indexového čísla, počínaje „ 0 ', Jak je ukázáno níže:
< tělo >< styl h1 = 'color: kadetblue;' > Linux h1 >
< tlačítko onclick = 'akce()' > Dáma knoflík >
< p > CSS třída který je nejprve přidělen , získá se : p >
< h3 id = 'useCase' třída = 'firstCls secondCls thirdCls' > h3 >
< skript >
funkce akce ( ) {
nechat demoList = dokument. getElementById ( 'useCase' ) . classList . položka ( 0 ) ;
dokument. getElementById ( 'useCase' ) . vnitřní HTML = demoList ;
}
skript >
tělo >
Vysvětlení výše uvedeného kódu:
- Nejprve je k našemu vybranému prvku přiřazeno několik tříd CSS s ID „ useCase “ a metodu „action()“, která se vyvolá prostřednictvím „ při kliknutí ' událost.
- V této funkci „ položka ()“ metoda s indexem „ 0 ” se připojí k vybranému prvku. Výsledek se uloží do proměnné ' demoList “, který se poté vytiskne přes webovou stránku pomocí „ vnitřní HTML ' vlastnictví.
Po skončení kompilace výstup vypadá takto:
Výstup zobrazuje název třídy CSS, která se nejprve aplikuje na vybraný prvek a získá se.
Metoda 6: Vlastnost délky
' délka ” vlastnost tokenList vrací počet prvků nebo přiřazených tříd, které jsou aplikovány na vybraný prvek. Proces implementace je uveden níže:
< skript >funkce akce ( ) {
nechat je zbourat = dokument. getElementById ( 'useCase' ) . classList . délka ;
dokument. getElementById ( 'useCase' ) . vnitřní HTML = strhnout ;
}
skript >
Ve výše uvedeném bloku kódu:
- Nejprve „ délka „nemovitost je připojena k „ classList ” pro získání počtu tříd, které jsou přiřazeny vybranému prvku.
- Dále se výsledek vlastnosti uloží do proměnné „ strhnout “, který se zobrazí přes webovou stránku u prvku s ID „ useCase “.
- Zbytek kódu zůstává stejný jako ve výše uvedené části.
Vygenerovaný výstup po kompilaci je uveden níže:
Výstup vrátí použité třídy nad prvkem.
Metoda 7: Metoda Replace().
' nahradit ()“ metoda je taková, která přebírá alespoň dva parametry a nahrazuje první parametr druhým parametrem pro vybraný prvek, jak je uvedeno níže:
< skript >funkce akce ( ) {
nechat demoList = dokument. getElementById ( 'useCase' ) . classList . nahradit ( 'velikost písma' , 'barva' ) ;
}
skript >
Zde CSS ' velikost písma “třída je nahrazena CSS” barva 'třída pro prvek s id ' useCase “. Zbytek kódu HTML a CSS zůstává stejný jako ve výše uvedených částech.
Po úpravě „ skript ” a kompilaci hlavního HTML souboru, výstup vypadá takto:
Výstup ukazuje, že konkrétní třída CSS byla nahrazena jinou třídou.
Metoda 8: Vlastnost hodnoty
' hodnota Vlastnost seznamu tokenů načte požadované hodnoty přiřazené k vybranému prvku HTML. Když se připojí vedle „ classList ” se načtou třídy přiřazené k vybraným prvkům, jak je ukázáno níže:
< skript >funkce akce ( ) {
nechat demoVal = dokument. getElementById ( 'useCase' ) . classList . hodnota ;
dokument. getElementById ( 'tisk' ) . vnitřní HTML = demoVal ;
}
skript >
Popis výše uvedeného fragmentu kódu:
- Uvnitř ' akce ()“ tělo funkce, „ hodnota “ vlastnost je připojena vedle “ classList ” pro načtení všech přiřazených tříd vybraných prvků HTML.
- Dále se výsledek výše uvedené vlastnosti uloží do proměnné „ demoVal “ a vloží se přes prvek s ID „print“.
Po skončení fáze kompilace se výstup na webové stránce vygeneruje následovně:
Výstup zobrazuje názvy tříd CSS, které jsou aplikovány na vybraný prvek.
Závěr
Objekt HTML DOM TokenList je jako pole ukládající více metod a vlastností, které se používají k aplikaci konkrétních funkcí na poskytnutý prvek HTML. Některé z nejdůležitějších a nejrozšířenějších metod poskytovaných TokenList jsou „ add()“, „remove()“, „toggle()“, „contains()“, „item()“ a „replace() “. Vlastnosti, které poskytuje TokenList, jsou „ délka ' a ' hodnota “. Tento článek vysvětluje postup práce s objektem JavaScript HTML DOMTokenList.