DOM” Lista tokenów ” zawiera wiele właściwości lub metod, do których użytkownik końcowy może uzyskać dostęp zgodnie z jego wymaganiami. Właściwości i metody zawarte na tej liście wykonują określone operacje na dostarczonych zestawach danych i odpowiednio zwracają wynik. Przypomina bardziej tablicę, ponieważ ma różne elementy, które można wybierać na podstawie ich indeksu i podobnie jak tablica, pierwszym indeksem jest „ 0 ”. Ale nie możesz używać metod takich jak „ pop()”, „push()” lub „dołącz() ”.
W tym blogu wyjaśniono działanie obiektów HTML DOMTokenList za pomocą JavaScript.
Jak pracować z obiektami JavaScript HTML DOMTokenList?
Lista DOMTokenList HTML sama w sobie nie jest niczym, a jej wartość wynika po prostu z właściwości i metod, które się w niej znajdują. Przyjrzyjmy się szczegółowo tym właściwościom i metodom wraz z właściwą implementacją.
Metoda 1: Metoda Add().
„ Dodać ()” dołącza lub przypisuje nowe klasy, właściwości lub proste tokeny do wybranego elementu. Jego składnia jest podana poniżej:
Element HTML. dodać ( oneOrMoreToken )
Jego implementacja odbywa się za pomocą następującego kodu:
< głowa >
< styl >
.rozmiar czcionki{
rozmiar czcionki: duży;
}
.kolor{
kolor tła: cadetblue;
kolor: białodymny;
}
< / styl >
< / głowa >
< ciało >
< h1 styl = 'kolor: błękit kadetowy;' > Linuksa < / h1 >
< przycisk na kliknięcie = 'działanie()' > Sumator < / przycisk >
< P > Naciśnij powyższy przycisk, aby zastosować stylizację < / P >
< div ID = 'wybrany' >
< P > Jestem wybranym tekstem. < / P >
< / div >
< scenariusz >
funkcja akcja() {
document.getElementById('wybrane').classList.add('rozmiar czcionki', 'kolor');
}
< / scenariusz >
< / ciało >
Wyjaśnienie powyższego kodu jest następujące:
- Najpierw wybierz dwie klasy CSS „ rozmiar czcionki ” i „kolor” i przypisz im losowe właściwości CSS, takie jak „ rozmiar czcionki”, „kolor tła” i „kolor ”.
- Następnie utwórz przyciski, używając „< przycisk >”, który wywołuje znacznik „ działanie ()” za pomocą przycisku „ na kliknięcie słuchacz zdarzeń.
- Dodatkowo utwórz element nadrzędny „ div ” i przypisz mu identyfikator „ wybrany ” i wstaw do niego fałszywe dane.
- Następnie zdefiniuj „ działanie ()” i przechowuje odniesienie do wybranego elementu, uzyskując dostęp do jego unikalnego identyfikatora.
- Na koniec użyj opcji „ Lista klas ”, aby przypisać klasy i dołączyć „ dodać ()' metoda. Następnie przekaż klasy CSS w nawiasie tej metody, a klasy zostaną zastosowane do wybranego elementu.
Dane wyjściowe po kompilacji powyższego kodu są generowane jako:
Powyższy gif potwierdza, że klasy CSS zostały przypisane do wybranego elementu poprzez przycisk „ dodać ()' metoda.
Metoda 2: Metoda Remove().
Ta metoda usuwa określoną klasę lub identyfikator z jednego lub większej liczby wybranych elementów, jak pokazano w poniższym kodzie:
< głowa >< styl >
.rozmiar czcionki {
czcionka- rozmiar : duży;
}
. kolor {
tło- kolor : kadetniebieski;
kolor : biały dym;
}
< / styl >
< / głowa >
< ciało >
< h1 styl = 'kolor: błękit kadetowy;' > Podpowiedź dotycząca Linuksa < / h1 >
< przycisk na kliknięcie = 'działanie()' >Dodaj< / przycisk >
< P >Naciśnij powyższy przycisk, aby zastosować stylizację< / P >
< div ID = 'wybrany' klasa = „Kolor rozmiaru czcionki” >
< P > jestem Wybrany Tekst .< / P >
< / div >
< scenariusz >
funkcjonować działanie ( ) {
dokument.getElementById ( 'wybrany' ) .lista_klas.usuń ( 'kolor' ) ;
}
< / scenariusz >
< / ciało >
Opis powyższego kodu wygląda następująco:
- Początkowo kod wyjaśniony w powyższym kodzie jest tutaj używany jako przykład.
- Tutaj zarówno „ kolor ' I ' rozmiar czcionki ” klasy są przypisane bezpośrednio do wybranego elementu.
- Następnie w środku „ działanie ()”, która jest wywoływana przez funkcję „ na kliknięcie ” słuchacz zdarzeń „ usunąć ()” stosowana jest metoda tokenowa.
- Metoda ta przyjmuje jedną lub wiele klas, które zostaną usunięte z wybranego elementu. W naszym przypadku „ kolor ” zostanie usunięta z wybranego elementu HTML.
Dane wyjściowe powyższego kodu są wyświetlane jako:
Powyższe dane wyjściowe pokazują, że konkretna klasa CSS została usunięta z wybranego elementu za pomocą metody „remove()”.
Metoda 3: Metoda Toggle().
„ przełącznik ()” jest kombinacją obu metod „ dodać ()' I ' usunąć ()” metod. Najpierw przypisuje dostarczoną klasę CSS do wybranego elementu HTML, a następnie usuwa ją w zależności od działań użytkownika.
< HTML >< głowa >
< styl >
.rozmiar czcionki {
czcionka- rozmiar : xx-duży;
}
. kolor {
tło- kolor : kadetniebieski;
kolor : biały dym;
}
< / styl >
< / głowa >
< ciało >
< h1 styl = 'kolor: błękit kadetowy;' > Podpowiedź dotycząca Linuksa < / h1 >
< przycisk na kliknięcie = 'działanie()' >Dodaj< / przycisk >
< P >Naciśnij powyższy przycisk, aby zastosować stylizację< / P >
< div ID = 'wybrany' >
< P > jestem Wybrany Tekst .< / P >
< / div >
< scenariusz >
funkcjonować działanie ( ) {
dokument.getElementById ( 'wybrany' ) .classList.toggle ( 'rozmiar czcionki' ) ;
}
< / scenariusz >
< / ciało >
< / HTML >
Opis powyższego kodu znajduje się poniżej:
- Używany jest ten sam program, co w powyższej sekcji, tylko „ przełącznik ()” zastępuje się metodą „ usunąć ()' metoda.
Na koniec fazy kompilacji wynik będzie następujący:
Dane wyjściowe pokazują, że konkretna klasa CSS jest dodawana i usuwana w zależności od działania użytkownika.
Metoda 4: Metoda zawiera().
„ zawiera ()” służy do sprawdzania dostępności określonych klas CSS w elemencie HTML, a jej implementację opisano poniżej:
< scenariusz >funkcjonować działanie ( ) {
niech x = dokument. pobierzElementById ( 'wybrany' ) . Lista klas . zawiera ( 'rozmiar czcionki' ) ;
dokument. pobierzElementById ( 'test' ) . wewnętrznyHTML = X ;
}
scenariusz >
Część HTML i CSS pozostaje taka sama. Tylko w „< scenariusz >”, na wybranym elemencie stosowana jest metoda „contains()” w celu sprawdzenia, czy znacznik „contains()” rozmiar czcionki ” jest stosowane do tego elementu, czy nie. Następnie wynik wyświetlany jest na stronie internetowej na elemencie HTML posiadającym identyfikator „ test ”.
Po skompilowaniu powyższego kodu strona wygląda następująco:
Dane wyjściowe pokazują, że wartość „ PRAWDA ”, co oznacza, że do wybranego elementu HTML zostanie zastosowana określona klasa CSS.
Metoda 5: Metoda Item().
„ przedmiot ()” wybiera token lub klasę CSS zgodnie z ich numerem indeksu, zaczynając od „ 0 ', jak pokazano niżej:
< ciało >< styl h1 = 'kolor: błękit kadetowy;' > Linuksa h1 >
< przycisk po kliknięciu = 'działanie()' > Szachownica przycisk >
< P > CSS klasa który jest przypisany na początku , zostaje odzyskany : P >
< identyfikator h3 = 'przypadek użycia' klasa = „pierwsze Cl, drugie Cl, trzecie Cl” > h3 >
< scenariusz >
funkcjonować działanie ( ) {
niech demoList = dokument. pobierzElementById ( 'przypadek użycia' ) . Lista klas . przedmiot ( 0 ) ;
dokument. pobierzElementById ( 'przypadek użycia' ) . wewnętrznyHTML = Lista demo ;
}
scenariusz >
ciało >
Wyjaśnienie powyższego kodu:
- Po pierwsze, do wybranego przez nas elementu przypisanych jest wiele klas CSS o identyfikatorze „ przypadek użycia ” i metodę „action()”, która jest wywoływana poprzez „ na kliknięcie ' wydarzenie.
- W tej funkcji „ przedmiot ()” z indeksem „ 0 ” zostanie dołączony do wybranego elementu. Wynik zostanie zapisany w zmiennej „ Lista demo ”, który jest następnie drukowany na stronie internetowej za pomocą przycisku „ wewnętrznyHTML ' nieruchomość.
Po zakończeniu kompilacji wynik wygląda następująco:
Dane wyjściowe pokazują nazwę klasy CSS, która początkowo ma zastosowanie do wybranego elementu i jest pobierana.
Metoda 6: Właściwość długości
„ długość ” Właściwość tokenList zwraca liczbę elementów lub przypisanych klas, które są stosowane do wybranego elementu. Proces wdrożenia opisano poniżej:
< scenariusz >funkcjonować działanie ( ) {
niech zburzą = dokument. pobierzElementById ( 'przypadek użycia' ) . Lista klas . długość ;
dokument. pobierzElementById ( 'przypadek użycia' ) . wewnętrznyHTML = zburzyć ;
}
scenariusz >
W powyższym bloku kodu:
- Po pierwsze ' długość ” nieruchomość jest przyłączona do „ Lista klas ”, aby pobrać liczbę klas przypisanych do wybranego elementu.
- Następnie wynik właściwości zostaje zapisany w zmiennej „ zburzyć ”, który będzie wyświetlany na stronie na elemencie o identyfikatorze „ przypadek użycia ”.
- Reszta kodu pozostaje taka sama jak w powyższej sekcji.
Wynik wygenerowany po kompilacji przedstawiono poniżej:
Dane wyjściowe zwracają klasy zastosowane w elemencie.
Metoda 7: Metoda Zamień().
„ zastępować ()” to taka, która przyjmuje co najmniej dwa parametry i zastępuje pierwszy parametr drugim parametrem dla wybranego elementu, jak pokazano poniżej:
< scenariusz >funkcjonować działanie ( ) {
niech demoList = dokument. pobierzElementById ( 'przypadek użycia' ) . Lista klas . zastępować ( 'rozmiar czcionki' , 'kolor' ) ;
}
scenariusz >
Tutaj CSS „ rozmiar czcionki ” klasa zostaje zastąpiona przez CSS „ kolor ” dla elementu o identyfikatorze „ przypadek użycia ”. Pozostała część kodu HTML i CSS pozostaje taka sama jak w powyższych sekcjach.
Po modyfikacji „ scenariusz ” i kompilując główny plik HTML, wynik wygląda następująco:
Dane wyjściowe pokazują, że określona klasa CSS została zastąpiona inną klasą.
Metoda 8: Właściwość wartości
„ wartość ” właściwość list tokenów pobiera wymagane wartości przypisane do wybranego elementu HTML. Kiedy zostanie dołączony obok „ Lista klas ” pobierane są klasy przypisane do wybranych elementów, jak pokazano poniżej:
< scenariusz >funkcjonować działanie ( ) {
niech demoVal = dokument. pobierzElementById ( 'przypadek użycia' ) . Lista klas . wartość ;
dokument. pobierzElementById ( 'wydrukować' ) . wewnętrznyHTML = demoVal ;
}
scenariusz >
Opis powyższego fragmentu kodu:
- W środku ' działanie ()” ciało funkcyjne, „ wartość ” nieruchomość jest dołączona obok „ Lista klas ”, aby pobrać wszystkie przypisane klasy wybranych elementów HTML.
- Następnie wynik powyższej właściwości zostaje zapisany w zmiennej „ demoVal ” i wstawiany nad elementem posiadającym identyfikator „print”.
Po zakończeniu fazy kompilacji dane wyjściowe na stronie internetowej są generowane w następujący sposób:
Dane wyjściowe pokazują nazwy klas CSS, które są stosowane do wybranego elementu.
Wniosek
Obiekt HTML DOM TokenList przypomina tablicę przechowującą wiele metod i właściwości, które służą do zastosowania określonej funkcjonalności w dostarczonym elemencie HTML. Niektóre z najważniejszych i najczęściej używanych metod udostępnianych przez TokenList to „ dodaj()”, „usuń()”, „przełącz()”, „zawiera()”, „przedmiot()” i „zamień() ”. Właściwości udostępniane przez TokenList to „ długość ' I ' wartość ”. W tym artykule wyjaśniono procedurę pracy z obiektem JavaScript HTML DOMTokenList.