ДОМ» Список токенов » содержит множество свойств или методов, к которым конечный пользователь может получить доступ в соответствии с его требованиями. Свойства и методы, представленные в этом списке, выполняют определенные операции над предоставленными наборами данных и возвращают соответствующий результат. Он больше похож на массив, поскольку в нем есть различные элементы, которые можно выбирать по их индексу, и, как и в случае с массивом, первый индекс равен « 0 ». Но вы не можете использовать такие методы, как « pop()», «push()» или «join()» ».
В этом блоге объясняется работа HTML-объектов DOMTokenList с помощью JavaScript.
Как работать с объектами JavaScript HTML DOMTokenList?
HTML DOMTokenList сам по себе ничего не значит, и его значение обусловлено только свойствами и методами, которые в нем находятся. Давайте подробно рассмотрим эти свойства и методы, а также их правильную реализацию.
Метод 1: Метод Добавить()
« Добавлять ()» присоединяет или назначает новые классы, свойства или простые токены с выбранным элементом. Его синтаксис указан ниже:
htmlЭлемент. добавлять ( oneOrMoreToken )
Его реализация осуществляется посредством следующего кода:
< голова >
< стиль >
.размер шрифта{
размер шрифта: большой;
}
.цвет{
цвет фона: кадетский синий;
цвет: белый дым;
}
< / стиль >
< / голова >
< тело >
< ч1 стиль '=' 'цвет: кадетский синий;' > Линукс < / ч1 >
< кнопка по щелчку '=' 'действие()' > Сумматор < / кнопка >
< п > Нажмите кнопку выше, чтобы применить стиль. < / п >
< делитель идентификатор '=' 'выбранный' >
< п > Я — Выбранный текст. < / п >
< / делитель >
< сценарий >
функция действие() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / сценарий >
< / тело >
Объяснение приведенного выше кода следующее:
- Сначала выберите два класса CSS « размер шрифта » и «цвет» и назначьте им случайные свойства CSS, например « размер шрифта», «цвет фона» и «цвет ».
- Затем создайте кнопки, используя «< кнопка >», который вызывает тег « действие ()» с помощью функции « по щелчку прослушиватель событий.
- Кроме того, создайте родительский « делитель ” элемент и присвойте ему идентификатор “ выбрано » и вставьте в него фиктивные данные.
- После этого определите « действие ()» и сохраните ссылку на выбранный элемент, получив доступ к его уникальному идентификатору.
- Наконец, используйте « список классов ” для назначения классов и присоединения “ добавлять ()». Затем передайте классы CSS внутри скобок этого метода, и он применит эти классы к выбранному элементу.
Вывод после компиляции приведенного выше кода генерируется как:
Приведенный выше рисунок подтверждает, что классы CSS были назначены выбранному элементу через « добавлять ()».
Метод 2: Метод Remove()
Этот метод удаляет определенный класс или идентификатор из одного или нескольких выбранных элементов, как это сделано в коде ниже:
< голова >< стиль >
.размер шрифта {
шрифт- размер : большой;
}
. цвет {
фон- цвет : кадетский синий;
цвет : белый дым;
}
< / стиль >
< / голова >
< тело >
< ч1 стиль '=' 'цвет: кадетский синий;' > Линуксхинт < / ч1 >
< кнопка по щелчку '=' 'действие()' >Сумматор< / кнопка >
< п >Нажмите кнопку выше, чтобы применить стиль< / п >
< делитель идентификатор '=' 'выбранный' сорт '=' 'цвет шрифта' >
< п >Я Выбрано Текст .< / п >
< / делитель >
< сценарий >
функция действие ( ) {
документ.getElementById ( 'выбранный' ) .classList.remove ( 'цвет' ) ;
}
< / сценарий >
< / тело >
Описание приведенного выше кода выглядит следующим образом:
- Первоначально код, описанный в приведенном выше коде, используется здесь в качестве примера.
- Здесь оба « цвет ' и ' размер шрифта » классы напрямую присваиваются выбранному элементу.
- После этого внутри « действие ()», которая вызывается функцией « по щелчку ” прослушиватель событий “ удалять ()» используется метод токена.
- Этот метод принимает один или несколько классов, которые будут удалены из выбранного элемента. В нашем случае « цвет ” будет удален из выбранного элемента HTML.
Вывод приведенного выше кода отображается как:
Приведенный выше вывод показывает, что определенный класс CSS был удален из выбранного элемента с помощью метода «remove()».
Метод 3: Метод Toggle()
« переключать ()» представляет собой комбинацию обоих « добавлять ()' и ' удалять ()» методы. Сначала он присваивает предоставленный класс CSS выбранному элементу HTML, а затем удаляет его в соответствии с действиями пользователя.
< HTML >< голова >
< стиль >
.размер шрифта {
шрифт- размер : хх-большой;
}
. цвет {
фон- цвет : кадетский синий;
цвет : белый дым;
}
< / стиль >
< / голова >
< тело >
< ч1 стиль '=' 'цвет: кадетский синий;' > Линуксхинт < / ч1 >
< кнопка по щелчку '=' 'действие()' >Сумматор< / кнопка >
< п >Нажмите кнопку выше, чтобы применить стиль< / п >
< делитель идентификатор '=' 'выбранный' >
< п >Я Выбрано Текст .< / п >
< / делитель >
< сценарий >
функция действие ( ) {
документ.getElementById ( 'выбранный' ) .classList.toggle ( 'размер шрифта' ) ;
}
< / сценарий >
< / тело >
< / HTML >
Описание приведенного выше кода приведено ниже:
- Используется та же программа, что и в предыдущем разделе, только « переключать ()» заменяется на метод « удалять ()».
В конце этапа компиляции результат будет следующим:
Вывод показывает, что определенный класс CSS добавляется и удаляется в зависимости от действий пользователя.
Метод 4: Метод contains()
« содержит ()» используется для проверки доступности определенных классов CSS для элемента HTML, и его реализация указана ниже:
< сценарий >функция действие ( ) {
пусть х '=' документ. getElementById ( 'выбранный' ) . список классов . содержит ( 'размер шрифта' ) ;
документ. getElementById ( 'тест' ) . внутреннийHTML '=' Икс ;
}
сценарий >
Часть HTML и CSS остается прежней. Только в разделе «< сценарий >», метод «contains()» применяется к выбранному элементу, чтобы проверить, есть ли тег «contains()». размер шрифта » применяется к этому элементу или нет. Затем результат отображается на веб-странице в элементе HTML, имеющем идентификатор « тест ».
После компиляции приведенного выше кода веб-страница выглядит следующим образом:
Вывод показывает, что значение « истинный », что означает, что определенный класс CSS применяется к выбранному элементу HTML.
Метод 5: Метод Item()
« элемент ()» выбирает токен или класс CSS в соответствии с их индексным номером, начиная с « 0 ', как показано ниже:
< тело >< стиль h1 '=' 'цвет: кадетский синий;' > Линукс ч1 >
< кнопка по клику '=' 'действие()' > Шашка кнопка >
< п > CSS сорт который назначается сначала , извлекается : п >
< идентификатор h3 '=' 'Случай использования' сорт '=' 'первыйCls второйCls третийCls' >/ h3 >
< сценарий >
функция действие ( ) {
пусть демо-список '=' документ. getElementById ( 'Случай использования' ) . список классов . элемент ( 0 ) ;
документ. getElementById ( 'Случай использования' ) . внутреннийHTML '=' демо-список ;
}
сценарий >
тело >
Объяснение приведенного выше кода:
- Во-первых, нашему выбранному элементу присваивается несколько классов CSS с идентификатором « вариант использования » и метод «action()», который вызывается через « по щелчку ' событие.
- В этой функции « элемент ()» с индексом « 0 » прикрепляется к выбранному элементу. Результат сохраняется в переменной « демо-список », который затем распечатывается на веб-странице с помощью « внутреннийHTML ' свойство.
После окончания компиляции вывод выглядит следующим образом:
В выводе показано имя класса CSS, который сначала применяется к выбранному элементу и затем извлекается.
Метод 6: свойство длины
« длина Свойство tokenList возвращает количество элементов или назначенных классов, которые применяются к выбранному элементу. Процесс реализации описан ниже:
< сценарий >функция действие ( ) {
пусть они снесут '=' документ. getElementById ( 'Случай использования' ) . список классов . длина ;
документ. getElementById ( 'Случай использования' ) . внутреннийHTML '=' снести ;
}
сценарий >
В приведенном выше блоке кода:
- Сначала « длина имущество прикреплено к объекту « список классов », чтобы получить количество классов, назначенных выбранному элементу.
- Далее результат свойства сохраняется в переменной « снести », который будет отображаться на веб-странице в элементе с идентификатором « вариант использования ».
- Остальная часть кода остается такой же, как в предыдущем разделе.
Сгенерированный результат после компиляции приведен ниже:
Выходные данные возвращают примененные классы к элементу.
Метод 7: Метод replace()
« заменять ()» — это метод, который принимает как минимум два параметра и заменяет первый параметр вторым параметром для выбранного элемента, как показано ниже:
< сценарий >функция действие ( ) {
пусть демо-список '=' документ. getElementById ( 'Случай использования' ) . список классов . заменять ( 'размер шрифта' , 'цвет' ) ;
}
сценарий >
Здесь CSS « размер шрифта ” класс заменяется CSS “ цвет ” класс для элемента с идентификатором “ вариант использования ». Остальная часть кода HTML и CSS остается такой же, как в приведенных выше разделах.
После изменения « сценарий » и компиляции основного HTML-файла, результат будет выглядеть следующим образом:
Вывод показывает, что конкретный класс CSS был заменен другим классом.
Метод 8: Свойство значения
« ценить Свойство списка токенов извлекает необходимые значения, присвоенные выбранному элементу HTML. Когда он прикрепляется рядом с « список классов », классы, назначенные выбранным элементам, извлекаются, как показано ниже:
< сценарий >функция действие ( ) {
пусть демоВал '=' документ. getElementById ( 'Случай использования' ) . список классов . ценить ;
документ. getElementById ( 'Распечатать' ) . внутреннийHTML '=' демоВал ;
}
сценарий >
Описание приведенного выше фрагмента кода:
- Внутри ' действие ()» тело функции, « ценить ” имущество прикреплено рядом с “ список классов ” для получения всех назначенных классов выбранных элементов HTML.
- Затем результат вышеуказанного свойства сохраняется в переменной « демоВал » и вставлен поверх элемента с идентификатором «print».
После окончания этапа компиляции выходные данные на веб-странице создаются следующим образом:
В выводе отображаются имена классов CSS, которые применяются к выбранному элементу.
Заключение
Объект HTML DOM TokenList подобен массиву, хранящему несколько методов и свойств, которые используются для применения определенных функций к предоставленному элементу HTML. Некоторые из наиболее важных и широко используемых методов, предоставляемых TokenList: add()», «remove()», «toggle()», «contains()», «item()» и «replace()». ». Свойства, предоставляемые TokenList: длина ' и ' ценить ». В этой статье объясняется процедура работы с объектом JavaScript HTML DOMTokenList.