DOM “ TokenList ” съдържа много свойства или методи, които могат да бъдат достъпни от крайния потребител според техните изисквания. Свойствата и методите, предоставени от този списък, извършват специфични операции върху предоставените набори от данни и съответно връщат резултата. Той е по-скоро като масив, защото има различни членове, които могат да бъдат избрани по техния индекс и точно като масив, първият индекс е ' 0 ”. Но не можете да използвате методи като „ pop()“, „push()“ или „join() ”.
Този блог ще обясни работата на HTML обекти DOMTokenList от JavaScript.
Как да работите с обекти на JavaScript HTML DOMTokenList?
HTML DOMTokenList не е нищо сам по себе си и стойността му се дължи само на свойствата и методите, които се намират в него. Нека разгледаме подробно тези свойства и методи заедно с правилното внедряване.
Метод 1: Метод Add().
„ Добавете ()” прикачва или присвоява нови класове, свойства или прости токени с избрания елемент. Синтаксисът му е посочен по-долу:
htmlElement. добавете ( oneOrMoreToken )
Имплементацията му се осъществява чрез следния код:
< глава >
< стил >
.размер на шрифта{
размер на шрифта: голям;
}
.color{
цвят на фона: cadetblue;
цвят: whitesmoke;
}
< / стил >
< / глава >
< тяло >
< h1 стил = 'цвят: cadetblue;' > Linux < / h1 >
< бутон onclick = 'действие()' > Зъбора < / бутон >
< стр > Натиснете горния бутон, за да приложите стил < / стр >
< див документ за самоличност = 'избрано' >
< стр > Аз съм избран текст. < / стр >
< / див >
< сценарий >
функция действие() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / сценарий >
< / тяло >
Обяснението на горния код е както следва:
- Първо изберете два CSS класа ' размер на шрифта ” и „цвят” и им присвоете произволни CSS свойства като „ font-size“, „background-color“ и „color ”.
- След това създайте бутони, като използвате „< бутон >”, който извиква „ действие ()” функция с помощта на „ onclick ” слушател на събития.
- Освен това създайте родител ' див ” елемент и му присвоете id от „ избрани ” и вмъкнете фиктивни данни вътре в него.
- След това дефинирайте „ действие ()” функция и съхранява референцията на избрания елемент чрез достъп до неговия уникален идентификатор.
- Накрая използвайте „ classList ” свойство за присвояване на класовете и прикачване на „ добавете ()” метод. След това предайте CSS класовете в тази скоба на метода и той ще приложи тези класове към избрания елемент.
Резултатът след компилирането на горния код се генерира като:
Горният gif потвърждава, че CSS класовете са присвоени на избран елемент чрез „ добавете ()” метод.
Метод 2: Метод Remove().
Този метод премахва конкретния клас или идентификатор от един или повече избрани елементи, както е направено в кода по-долу:
< глава >< стил >
.размер на шрифта {
шрифт- размер : голям;
}
. цвят {
заден план- цвят : cadetblue;
цвят : бял дим;
}
< / стил >
< / глава >
< тяло >
< h1 стил = 'цвят: cadetblue;' > Linuxhint < / h1 >
< бутон onclick = 'действие()' >Добавител< / бутон >
< стр >Натиснете бутона по-горе, за да приложите стил< / стр >
< див документ за самоличност = 'избрано' клас = 'fontSize цвят' >
< стр > Аз съм Избрано Текст .< / стр >
< / див >
< сценарий >
функция действие ( ) {
document.getElementById ( 'избрано' ) .classList.remove ( 'цвят' ) ;
}
< / сценарий >
< / тяло >
Описанието на горния код е както следва:
- Първоначално кодът, обяснен в горния код, се използва тук като пример.
- Тук и двете „ цвят ' и ' размер на шрифта ” класовете се присвояват директно на избрания елемент.
- След това вътре в „ действие ()” функция, която се извиква от “ onclick 'слушател на събития' Премахване ()” се използва методът на токена.
- Този метод взема един или няколко класа, които ще бъдат премахнати от избрания елемент. В нашия случай „ цвят ” ще бъде премахнат от избрания HTML елемент.
Резултатът за горния код се показва като:
Горният резултат показва, че конкретният CSS клас е премахнат от избрания елемент с помощта на метода „remove()“.
Метод 3: Метод Toggle().
„ превключвам ()” методът е комбинация от двете “ добавете ()' и ' Премахване ()” методи. Първо присвоява предоставения CSS клас на избрания HTML елемент и след това го премахва според действията на потребителя.
< html >< глава >
< стил >
.размер на шрифта {
шрифт- размер : xx-голям;
}
. цвят {
заден план- цвят : cadetblue;
цвят : бял дим;
}
< / стил >
< / глава >
< тяло >
< h1 стил = 'цвят: cadetblue;' > Linuxhint < / h1 >
< бутон onclick = 'действие()' >Добавител< / бутон >
< стр >Натиснете бутона по-горе, за да приложите стил< / стр >
< див документ за самоличност = 'избрано' >
< стр > Аз съм Избрано Текст .< / стр >
< / див >
< сценарий >
функция действие ( ) {
document.getElementById ( 'избрано' ) .classList.toggle ( 'размер на шрифта' ) ;
}
< / сценарий >
< / тяло >
< / html >
Описание на горния код е посочено по-долу:
- Използва се същата програма, както в горния раздел, само „ превключвам ()” методът се заменя с „ Премахване ()” метод.
В края на фазата на компилиране изходът ще бъде както следва:
Резултатът показва, че конкретният CSS клас се добавя и премахва според действието на потребителя.
Метод 4: Метод Contains().
„ съдържа ()” методът се използва за проверка на наличността на конкретни CSS класове върху HTML елемента и неговата реализация е посочена по-долу:
< сценарий >функция действие ( ) {
нека х = документ. getElementById ( 'избрано' ) . classList . съдържа ( 'размер на шрифта' ) ;
документ. getElementById ( 'тест' ) . innerHTML = х ;
}
сценарий >
HTML и CSS частта остава същата. Само в „< сценарий >“, методът „contains()“ се прилага върху избрания елемент, за да провери дали „ размер на шрифта ” се прилага към този елемент или не. След това резултатът се показва на уеб страницата в HTML елемент с идентификатор „ тест ”.
След компилирането на горния код, уеб страницата изглежда така:
Резултатът показва, че стойността на „ вярно ” се връща, което означава, че специфичният CSS клас се прилага върху избрания HTML елемент.
Метод 5: Метод Item().
„ вещ ()” методът избира токена или CSS класа според техния индексен номер, започвайки от “ 0 “, както е показано по-долу:
< тяло >< h1 стил = 'цвят: cadetblue;' > Linux h1 >
< бутон при щракване = 'действие()' > Дама бутон >
< стр > CSS клас който се задава първоначално , се извлича : стр >
< h3 id = 'случай на използване' клас = 'firstCls secondCls thirdCls' > h3 >
< сценарий >
функция действие ( ) {
нека demoList = документ. getElementById ( 'случай на използване' ) . classList . вещ ( 0 ) ;
документ. getElementById ( 'случай на използване' ) . innerHTML = demoList ;
}
сценарий >
тяло >
Обяснение на горния код:
- Първо, множество CSS класове се присвояват на нашия избран елемент с идентификатор „ useCase ” и метода „action()”, който се извиква чрез „ onclick ” събитие.
- В тази функция „ вещ ()” метод с индекс „ 0 ” се прикачва към избрания елемент. Резултатът се съхранява в променливата „ demoList “, който след това се отпечатва върху уеб страницата с помощта на „ innerHTML ' Имот.
След края на компилацията изходът идва така:
Резултатът показва името на CSS класа, който се прилага първо върху избрания елемент и се извлича.
Метод 6: Свойство дължина
„ дължина ” свойството на tokenList връща броя на елементите или присвоените класове, които се прилагат върху избрания елемент. Процесът на изпълнение е посочен по-долу:
< сценарий >функция действие ( ) {
нека рушат = документ. getElementById ( 'случай на използване' ) . classList . дължина ;
документ. getElementById ( 'случай на използване' ) . innerHTML = сривам ;
}
сценарий >
В горния кодов блок:
- Първо „ дължина ” собствеността е прикрепена към „ classList ”, за да извлечете броя на класовете, които са присвоени на избрания елемент.
- След това резултатът от свойството се съхранява в променливата „ сривам ”, който ще се показва върху уеб страницата на елемент с идентификатор „ useCase ”.
- Останалата част от кода остава същата като в горния раздел.
Генерираният резултат след компилацията е посочен по-долу:
Изходът връща приложените класове върху елемента.
Метод 7: Метод Replace().
„ замени ()” методът е този, който приема поне два параметъра и замества първия параметър с втория параметър за избрания елемент, както е показано по-долу:
< сценарий >функция действие ( ) {
нека demoList = документ. getElementById ( 'случай на използване' ) . classList . замени ( 'размер на шрифта' , 'цвят' ) ;
}
сценарий >
Тук CSS „ размер на шрифта ' класът се заменя с CSS ' цвят ” клас за елемент с идентификатор „ useCase ”. Останалата част от HTML и CSS кода остава същата като в горните секции.
След промяна на „ сценарий ” част и компилиране на основния HTML файл, изходът изглежда така:
Резултатът показва, че конкретният CSS клас е заменен с друг клас.
Метод 8: Свойство стойност
„ стойност ” свойството списък с токени извлича необходимите стойности, присвоени на избрания HTML елемент. Когато се прикачи до „ classList ”, класовете, присвоени на избраните елементи, се извличат, както е показано по-долу:
< сценарий >функция действие ( ) {
нека demoVal = документ. getElementById ( 'случай на използване' ) . classList . стойност ;
документ. getElementById ( 'печат' ) . innerHTML = demoVal ;
}
сценарий >
Описание на горепосочения кодов фрагмент:
- Вътре в „ действие ()” функционално тяло, „ стойност ” свойство е прикачено до „ classList ”, за да извлечете всички присвоени класове на избраните HTML елементи.
- След това резултатът от горното свойство се съхранява в променлива „ demoVal ” и вмъкнат върху елемента с идентификатор „print”.
След края на фазата на компилиране изходът на уеб страница се генерира, както следва:
Резултатът показва името на CSS класовете, които се прилагат върху избрания елемент.
Заключение
Обектът HTML DOM TokenList е като масив, съхраняващ множество методи и свойства, които се използват за прилагане на специфична функционалност върху предоставения HTML елемент. Някои от най-важните и широко използвани методи, предоставени от TokenList, са „ add()”, “remove()”, “toggle()”, “contains()”, “item()” и “replace() ”. Свойствата, предоставени от TokenList са „ дължина ' и ' стойност ”. Тази статия обяснява процедурата за работа с JavaScript HTML обекта DOMTokenList.