A DOM' TokenList ” rengeteg olyan tulajdonságot vagy metódust tartalmaz, amelyekhez a végfelhasználó igényei szerint hozzáférhet. A listában megadott tulajdonságok és metódusok meghatározott műveleteket hajtanak végre a megadott adatkészleteken, és ennek megfelelően adják vissza az eredményt. Inkább egy tömbhöz hasonlít, mert különböző tagokat tartalmaz, amelyek az indexük alapján választhatók ki, és akárcsak egy tömb, az első index a ' 0 ”. De nem használhatsz olyan módszereket, mint ' pop()”, „push()” vagy „join() ”.
Ez a blog elmagyarázza a HTML DOMTokenList objektumok JavaScript általi működését.
Hogyan kell dolgozni JavaScript HTML DOMTokenList objektumokkal?
A HTML DOMTokenList önmagában semmi, és értéke csak a benne található tulajdonságoknak és metódusoknak köszönhető. Nézzük meg ezeket a tulajdonságokat és módszereket részletesen a megfelelő megvalósítással együtt.
1. módszer: Add() módszer
A ' Hozzáadás ()” új osztályokat, tulajdonságokat vagy egyszerű tokeneket csatol vagy rendel hozzá a kiválasztott elemhez. A szintaxisa az alábbiakban olvasható:
htmlElement. add hozzá ( oneOrMoreToken )
Megvalósítása a következő kódon keresztül történik:
< fej >
< stílus >
.betűméret{
betűméret: nagy;
}
.szín{
háttérszín: kadetkék;
szín: whitesmoke;
}
< / stílus >
< / fej >
< test >
< h1 stílus = 'szín: kadetkék;' > Linux < / h1 >
< gomb kattintásra = 'akció()' > Vipera < / gomb >
< p > Nyomja meg a fenti gombot a stílus alkalmazásához < / p >
< div id = 'kiválasztott' >
< p > Kiválasztott szöveg vagyok. < / p >
< / div >
< forgatókönyv >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / forgatókönyv >
< / test >
A fenti kód magyarázata a következő:
- Először válasszon két CSS-osztályt ' betűméret ' és a 'color' és rendeljen hozzájuk véletlenszerű CSS-tulajdonságokat, például ' font-size”, „background-color” és „color ”.
- Ezután hozzon létre gombokat a „< használatával gomb >” címke, amely meghívja a „ akció ()” funkciót a „ kattintásra ” eseményhallgató.
- Ezenkívül hozzon létre egy szülőt ' div ' elemet, és rendelje hozzá a ' kiválasztott ” és helyezzen be áladatokat.
- Ezt követően határozza meg a „ akció ()” függvényt, és tárolja a kiválasztott elem hivatkozását az egyedi azonosítójának elérésével.
- Végül használja a „ osztálylista ” tulajdonság az osztályok hozzárendeléséhez és a „ add hozzá ()” módszerrel. Ezután adja át a CSS-osztályokat ebben a metóduszárójelben, és ezeket az osztályokat alkalmazza a kiválasztott elemre.
A fenti kód összeállítása után a kimenet a következőképpen jön létre:
A fenti gif megerősíti, hogy a CSS osztályok hozzá lettek rendelve egy kiválasztott elemhez a „ add hozzá ()” módszerrel.
2. módszer: Remove() módszer
Ez a metódus eltávolítja az adott osztályt vagy azonosítót egy vagy több kiválasztott elemből az alábbi kód szerint:
< fej >< stílus >
.betűméret {
betűtípus- méret : nagy;
}
. szín {
háttér- szín : kadetkék;
szín : fehér füst;
}
< / stílus >
< / fej >
< test >
< h1 stílus = 'szín: kadetkék;' > Linuxhint < / h1 >
< gomb kattintásra = 'akció()' >Hozzáadó< / gomb >
< p >Nyomja meg a fenti gombot a stílus alkalmazásához< / p >
< div id = 'kiválasztott' osztály = 'fontSize color' >
< p > Én vagyok Kiválasztott Szöveg .< / p >
< / div >
< forgatókönyv >
funkció akció ( ) {
document.getElementById ( 'kiválasztott' ) .classList.remove ( 'szín' ) ;
}
< / forgatókönyv >
< / test >
A fenti kód leírása a következő:
- Kezdetben a fenti kódban magyarázott kódot használjuk itt példaként.
- Itt mind a „ szín ” és „ betűméret ” osztályok közvetlenül a kiválasztott elemhez vannak rendelve.
- Ezt követően a „ akció ()” függvény, amelyet a „ kattintásra ' eseményfigyelő a ' távolítsa el ()” token módszert használjuk.
- Ez a metódus egy vagy több osztályt vesz igénybe, amelyeket eltávolítunk a kiválasztott elemből. Esetünkben a „ szín ” osztály eltávolításra kerül a kiválasztott HTML elemből.
A fenti kód kimenete a következőképpen jelenik meg:
A fenti kimenet azt mutatja, hogy az adott CSS-osztályt eltávolították a kiválasztott elemből a „remove()” metódussal.
3. módszer: Toggle() metódus
A ' kapcsolót ()' módszer a kettő kombinációja add hozzá ()” és „ távolítsa el ()” módszereket. Először hozzárendeli a megadott CSS osztályt a kiválasztott HTML elemhez, majd a felhasználó műveleteinek megfelelően eltávolítja.
< html >< fej >
< stílus >
.betűméret {
betűtípus- méret : xx-nagy;
}
. szín {
háttér- szín : kadetkék;
szín : fehér füst;
}
< / stílus >
< / fej >
< test >
< h1 stílus = 'szín: kadetkék;' > Linuxhint < / h1 >
< gomb kattintásra = 'akció()' >Hozzáadó< / gomb >
< p >Nyomja meg a fenti gombot a stílus alkalmazásához< / p >
< div id = 'kiválasztott' >
< p > Én vagyok Kiválasztott Szöveg .< / p >
< / div >
< forgatókönyv >
funkció akció ( ) {
document.getElementById ( 'kiválasztott' ) .classList.toggle ( 'betűméret' ) ;
}
< / forgatókönyv >
< / test >
< / html >
A fenti kód leírása az alábbiakban található:
- Ugyanazt a programot használjuk, mint a fenti részben, csak a „ kapcsolót ()” módszer helyébe a „ távolítsa el ()” módszerrel.
Az összeállítási fázis végén a kimenet a következő lesz:
A kimenet azt mutatja, hogy az adott CSS-osztály hozzáadása és eltávolítása a felhasználó műveletének megfelelően történik.
4. módszer: Contains() Method
A ' tartalmaz ()” metódus az egyes CSS-osztályok elérhetőségének ellenőrzésére szolgál a HTML elemen keresztül, és ennek megvalósítását az alábbiakban ismertetjük:
< forgatókönyv >funkció akció ( ) {
legyen x = dokumentum. getElementById ( 'kiválasztott' ) . osztálylista . tartalmaz ( 'betűméret' ) ;
dokumentum. getElementById ( 'teszt' ) . innerHTML = x ;
}
forgatókönyv >
A HTML és a CSS rész ugyanaz marad. Csak a „< forgatókönyv >” címke, a „contains()” metódus kerül alkalmazásra a kiválasztott elemre annak ellenőrzésére, hogy a „ betűméret ” vonatkozik-e az elemre, vagy sem. Ezután az eredmény megjelenik a weboldalon egy HTML elemen, amelynek azonosítója ' teszt ”.
A fenti kód összeállítása után a weboldal így néz ki:
A kimenet azt mutatja, hogy a „ igaz ” szöveget ad vissza, ami azt jelenti, hogy az adott CSS-osztály kerül alkalmazásra a kiválasztott HTML-elemre.
5. módszer: Item() módszer
A ' tétel ()” metódus kiválasztja a tokent vagy a CSS osztályt az indexszámuk szerint, kezdve a „ 0 ', az alábbiak szerint:
< test >< h1 stílusban = 'szín: kadetkék;' > Linux h1 >
< gomb onclick = 'akció()' > Ellenőrző gomb >
< p > A CSS osztály amely eleinte ki van osztva , visszakerül : p >
< h3 id = 'useCase' osztály = 'firstCls secondCls thirdCls' > h3 >
< forgatókönyv >
funkció akció ( ) {
hadd demoList = dokumentum. getElementById ( 'useCase' ) . osztálylista . tétel ( 0 ) ;
dokumentum. getElementById ( 'useCase' ) . innerHTML = demoList ;
}
forgatókönyv >
test >
A fenti kód magyarázata:
- Először is több CSS osztály van hozzárendelve a kiválasztott elemünkhöz „azonosítóval useCase ” és az „action()” metódus, amely a „ kattintásra ” esemény.
- Ebben a funkcióban a „ tétel ()” módszer, amelynek indexe „ 0 ” csatlakozik a kiválasztott elemhez. Az eredmény a ' változóban tárolódik demoList ', amely ezután a ' innerHTML ' ingatlan.
A fordítás vége után a kimenet a következőképpen jelenik meg:
A kimenet a CSS-osztály nevét mutatja, amely először a kiválasztott elemre vonatkozik, és lekérésre kerül.
6. módszer: hossz Tulajdonság
A ' hossz A tokenList ” tulajdonsága a kiválasztott elemre alkalmazott elemek vagy hozzárendelt osztályok számát adja vissza. A megvalósítás folyamatát az alábbiakban ismertetjük:
< forgatókönyv >funkció akció ( ) {
hadd rombolják le = dokumentum. getElementById ( 'useCase' ) . osztálylista . hossz ;
dokumentum. getElementById ( 'useCase' ) . innerHTML = lebontani ;
}
forgatókönyv >
A fenti kódblokkban:
- Először a ' hossz ' ingatlan a ' osztálylista ” tulajdonság a kiválasztott elemhez hozzárendelt osztályok számának lekéréséhez.
- Ezután a tulajdonság eredménye a „ változóban tárolódik lebontani ', amely a weboldal felett egy 'azonosítójú' elemen jelenik meg useCase ”.
- A kód többi része ugyanaz marad, mint a fenti szakaszban.
Az összeállítás után generált kimenet az alábbiakban látható:
A kimenet visszaadja az alkalmazott osztályokat az elem felett.
7. módszer: Csere() módszer
A ' cserélje ki ()” metódus az, amely legalább két paramétert vesz fel, és az első paramétert lecseréli a kiválasztott elem második paraméterére, az alábbiak szerint:
< forgatókönyv >funkció akció ( ) {
hadd demoList = dokumentum. getElementById ( 'useCase' ) . osztálylista . cserélje ki ( 'betűméret' , 'szín' ) ;
}
forgatókönyv >
Itt a CSS ' betűméret ' osztály lecserélődik a CSS-re ' szín ' osztály olyan elemhez, amelynek azonosítója ' useCase ”. A HTML- és CSS-kód többi része ugyanaz marad, mint a fenti szakaszokban.
A „ forgatókönyv ” részt, és a fő HTML-fájlt lefordítva a kimenet így néz ki:
A kimenet azt mutatja, hogy az adott CSS-osztályt lecserélték egy másik osztályra.
8. módszer: Értéktulajdonság
A ' érték ” token lista tulajdonság lekéri a kiválasztott HTML elemhez rendelt szükséges értékeket. Amikor a „ osztálylista ” tulajdonság, a kiválasztott elemekhez rendelt osztályok lekérésre kerülnek, az alábbiak szerint:
< forgatókönyv >funkció akció ( ) {
hadd demoVal = dokumentum. getElementById ( 'useCase' ) . osztálylista . érték ;
dokumentum. getElementById ( 'nyomtatás' ) . innerHTML = demoVal ;
}
forgatókönyv >
A fent említett kódrészlet leírása:
- Benne ' akció ()” funkciótest, a „ érték ” ingatlan a következőhöz kapcsolódik: osztálylista ” tulajdonság a kiválasztott HTML elemek összes hozzárendelt osztályának lekéréséhez.
- Ezután a fenti tulajdonság eredménye egy változóban kerül tárolásra demoVal ” és beszúrjuk a „print” azonosítójú elem fölé.
A fordítási fázis befejezése után a weboldalon a kimenet a következőképpen jön létre:
A kimenet a kiválasztott elemre alkalmazott CSS-osztályok nevét mutatja.
Következtetés
A HTML DOM TokenList objektum olyan, mint egy tömb, amely több metódust és tulajdonságot tárol, amelyeket arra használnak, hogy meghatározott funkciókat alkalmazzanak a megadott HTML elemen. A TokenList által biztosított legfontosabb és legszélesebb körben használt módszerek közül néhány a ' add()”, „remove()”, „toggle()”, „contains()”, „item()” és „replace() ”. A TokenList által biztosított tulajdonságok a következők: hossz ” és „ érték ”. Ez a cikk ismerteti a JavaScript HTML DOMTokenList objektummal való együttműködést.