ДОМ “ ТокенЛист ” садржи много својстава или метода којима може приступити крајњи корисник у складу са својим захтевима. Својства и методе које пружа ова листа изводе одређене операције над датим скуповима података и враћају резултат у складу са тим. Више личи на низ јер има различите чланове који се могу изабрати њиховим индексом и баш као низ, први индекс је „ 0 ”. Али не можете користити методе као што су „ поп()“, „пусх()“ или „јоин() ”.
Овај блог ће објаснити рад ХТМЛ ДОМТокенЛист објеката помоћу ЈаваСцрипт-а.
Како радити са ЈаваСцрипт ХТМЛ ДОМТокенЛист објектима?
ХТМЛ ДОМТокенЛист није ништа сам по себи и његова вредност је само због својстава и метода које се налазе у њему. Хајде да детаљно посетимо ова својства и методе заједно са правилном имплементацијом.
Метод 1: Адд() Метод
„ Додати ()” прилаже или додељује нове класе, својства или једноставне токене са изабраним елементом. Његова синтакса је наведена у наставку:
хтмлЕлемент. додати ( онеОрМореТокен )
Његова имплементација се врши преко следећег кода:
< глава >
< стил >
.фонтСизе{
величина фонта: велика;
}
.цолор{
боја позадине: цадетблуе;
боја: бели дим;
}
< / стил >
< / глава >
< тело >
< х1 стил = 'боја: кадетско плава;' > Линук < / х1 >
< дугме онцлицк = 'поступак()' > Гуја < / дугме >
< стр > Притисните горње дугме да бисте применили стил < / стр >
< див ид = 'одабрано' >
< стр > Ја сам Изабрани текст. < / стр >
< / див >
< скрипта >
фунцтион ацтион() {
доцумент.гетЕлементБиИд('селецтед').цлассЛист.адд('фонтСизе', 'цолор');
}
< / скрипта >
< / тело >
Објашњење горњег кода је следеће:
- Прво изаберите две ЦСС класе “ фонтСизе ” и „боја” и доделите им насумична ЦСС својства попут „ величина фонта“, „боја позадине“ и „боја ”.
- Затим креирајте дугмад користећи „< дугме >“ ознаку која позива „ поступак ()“ функција помоћу „ онцлицк ” слушалац догађаја.
- Поред тога, креирајте родитељски „ див ” елемент и доделите му ИД од „ изабрани ” и уметните лажне податке у њега.
- Након тога, дефинишите „ поступак ()” и чува референцу изабраног елемента приступајући његовом јединственом ИД-у.
- На крају, користите „ цлассЛист ” да доделите класе и приложите „ додати ()” метод. Затим проследите ЦСС класе унутар ове заграде методе и она ће применити ове класе на изабрани елемент.
Излаз након компилације горњег кода се генерише као:
Горњи гиф потврђује да су ЦСС класе додељене изабраном елементу преко „ додати ()” метод.
Метод 2: Метод Ремове().
Овај метод уклања одређену класу или ИД из једног или више изабраних елемената као што је урађено у коду испод:
< глава >< стил >
.фонтСизе {
фонт- величина : велика;
}
. боја {
позадина- боја : цадетблуе;
боја : Бели дим;
}
< / стил >
< / глава >
< тело >
< х1 стил = 'боја: кадетско плава;' > Линукхинт < / х1 >
< дугме онцлицк = 'поступак()' >Аддер< / дугме >
< стр >Притисните горње дугме да бисте применили стил< / стр >
< див ид = 'одабрано' класа = 'боја величине фонта' >
< стр >Јесам Одабрано Текст .< / стр >
< / див >
< скрипта >
функција поступак ( ) {
доцумент.гетЕлементБиИд ( 'одабрано' ) .цлассЛист.ремове ( 'боја' ) ;
}
< / скрипта >
< / тело >
Опис горњег кода је следећи:
- У почетку, код објашњен у горњем коду се овде користи као пример.
- Овде, оба „ боја ' и ' фонтСизе ” класе се директно додељују изабраном елементу.
- Након тога, унутар „ поступак ()“ функција коју позива „ онцлицк “ слушалац догађаја “ уклонити ()” користи се метод токена.
- Овај метод узима једну или више класа које ће бити уклоњене из изабраног елемента. У нашем случају, „ боја ” класа ће бити уклоњена из изабраног ХТМЛ елемента.
Излаз за горњи код се приказује као:
Горњи излаз показује да је специфична ЦСС класа уклоњена из изабраног елемента помоћу методе „ремове()“.
Метод 3: Метод Тоггле().
„ искључи ()“ метода је комбинација оба „ додати ()' и ' уклонити ()” методе. Прво додељује обезбеђену ЦСС класу изабраном ХТМЛ елементу, а затим га уклања у складу са радњама корисника.
< хтмл >< глава >
< стил >
.фонтСизе {
фонт- величина : кк-ларге;
}
. боја {
позадина- боја : цадетблуе;
боја : Бели дим;
}
< / стил >
< / глава >
< тело >
< х1 стил = 'боја: кадетско плава;' > Линукхинт < / х1 >
< дугме онцлицк = 'поступак()' >Аддер< / дугме >
< стр >Притисните горње дугме да бисте применили стил< / стр >
< див ид = 'одабрано' >
< стр >Јесам Одабрано Текст .< / стр >
< / див >
< скрипта >
функција поступак ( ) {
доцумент.гетЕлементБиИд ( 'одабрано' ) .цлассЛист.тоггле ( 'фонтСизе' ) ;
}
< / скрипта >
< / тело >
< / хтмл >
Опис горњег кода је наведен у наставку:
- Користи се исти програм као у претходном одељку, само „ искључи ()” метод се замењује са „ уклонити ()” метод.
На крају фазе компилације, излаз ће бити следећи:
Излаз показује да се одређена ЦСС класа додаје и уклања у складу са радњом корисника.
Метод 4: Метод Цонтаинс().
„ садржи ()” метода се користи за проверу доступности одређених ЦСС класа преко ХТМЛ елемента и њена имплементација је наведена у наставку:
< скрипта >функција поступак ( ) {
нека к = документ. гетЕлементБиИд ( 'одабрано' ) . цлассЛист . садржи ( 'фонтСизе' ) ;
документ. гетЕлементБиИд ( 'тест' ) . иннерХТМЛ = Икс ;
}
скрипта >
ХТМЛ и ЦСС део остају исти. Само у „< скрипта >” метода „цонтаинс()” се примењује на изабрани елемент да би се проверило да ли је „ фонтСизе ” се примењује на тај елемент или не. Затим се резултат приказује на веб страници на ХТМЛ елементу који има ИД „ тест ”.
Након компилације горњег кода, веб страница изгледа овако:
Излаз показује да је вредност “ истина ” се враћа што значи да је одређена ЦСС класа примењена на изабрани ХТМЛ елемент.
Метод 5: Итем() Метод
„ предмет ()” метод бира токен или ЦСС класу према њиховом индексном броју, почевши од „ 0 ', како је приказано испод:
< тело >< х1 стил = 'боја: кадетско плава;' > Линук х1 >
< дугме онцлицк = 'поступак()' > Цхецкер дугме >
< стр > ЦСС класа који се на почетку додељује , се преузима : стр >
< х3 ид = 'усеЦасе' класа = 'фирстЦлс сецондЦлс тхирдЦлс' > х3 >
< скрипта >
функција поступак ( ) {
нека демоЛист = документ. гетЕлементБиИд ( 'усеЦасе' ) . цлассЛист . предмет ( 0 ) ;
документ. гетЕлементБиИд ( 'усеЦасе' ) . иннерХТМЛ = демоЛист ;
}
скрипта >
тело >
Објашњење горњег кода:
- Прво, нашем изабраном елементу се додељује више ЦСС класа са ИД-ом „ усеЦасе ” и метод „ацтион()” који се позива преко „ онцлицк ” догађај.
- У овој функцији, „ предмет ()“ метод са индексом „ 0 ” се везује за изабрани елемент. Резултат се чува у променљивој „ демоЛист ” који се затим штампа преко веб странице користећи „ иннерХТМЛ ' имовина.
Након завршетка компилације, излаз долази овако:
Излаз приказује име ЦСС класе које се прво примењује на изабрани елемент и преузима.
Метод 6: својства дужине
„ дужина ” својство токенЛист враћа број елемената или додељених класа које су примењене на изабрани елемент. Процес имплементације је наведен у наставку:
< скрипта >функција поступак ( ) {
нека руше = документ. гетЕлементБиИд ( 'усеЦасе' ) . цлассЛист . дужина ;
документ. гетЕлементБиИд ( 'усеЦасе' ) . иннерХТМЛ = рушити ;
}
скрипта >
У горњем блоку кода:
- Прво „ дужина ” својство је приложено уз „ цлассЛист ” за преузимање броја класа које су додељене изабраном елементу.
- Затим, резултат својства се чува у променљивој „ рушити ” који ће бити приказан преко веб странице на елементу са ИД-ом „ усеЦасе ”.
- Остатак кода остаје исти као у горњем одељку.
Генерисани излаз након компилације је наведен у наставку:
Излаз враћа примењене класе преко елемента.
Метод 7: Метод Реплаце().
„ заменити ()” метод је онај који узима најмање два параметра и замењује први параметар другим параметром за изабрани елемент, као што је приказано испод:
< скрипта >функција поступак ( ) {
нека демоЛист = документ. гетЕлементБиИд ( 'усеЦасе' ) . цлассЛист . заменити ( 'фонтСизе' , 'боја' ) ;
}
скрипта >
Овде, ЦСС “ фонтСизе ” класа је замењена са ЦСС “ боја ” класа за елемент са ИД-ом “ усеЦасе ”. Остатак ХТМЛ и ЦСС кода остаје исти као у горњим одељцима.
Након измене „ скрипта ” и компајлирајући главну ХТМЛ датотеку, излаз изгледа овако:
Излаз показује да је одређена ЦСС класа замењена другом класом.
Метод 8: Својство вредности
„ вредност ” својство листе токена преузима потребне вредности додељене изабраном ХТМЛ елементу. Када се прикачи поред „ цлассЛист “, класе додељене изабраним елементима се преузимају, као што је приказано у наставку:
< скрипта >функција поступак ( ) {
нека демоВал = документ. гетЕлементБиИд ( 'усеЦасе' ) . цлассЛист . вредност ;
документ. гетЕлементБиИд ( 'штампати' ) . иннерХТМЛ = демоВал ;
}
скрипта >
Опис горе наведеног исечка кода:
- Унутар ' поступак ()“ тело функције, „ вредност ” својство је приложено поред „ цлассЛист ” за преузимање свих додељених класа изабраних ХТМЛ елемената.
- Затим, резултат горње особине се чува у променљивој „ демоВал ” и уметнут преко елемента који има ИД „штампање“.
Након завршетка фазе компилације, излаз на веб страници се генерише на следећи начин:
Излаз показује назив ЦСС класа које се примењују на изабрани елемент.
Закључак
ХТМЛ ДОМ ТокенЛист објекат је попут низа који чува више метода и својстава који се користе за примену одређене функционалности преко датог ХТМЛ елемента. Неке од најважнијих и најчешће коришћених метода које пружа ТокенЛист су „ адд()“, „ремове()“, „тоггле()“, „цонтаинс()“, „итем()“ и „реплаце() ”. Својства која обезбеђује ТокенЛист су „ дужина ' и ' вредност ”. Овај чланак је објаснио процедуру за рад са ЈаваСцрипт ХТМЛ објектом ДОМТокенЛист.