JS метод DOMTokenList.supports()

Загальний опис

supports() є методом, який перевіряє, чи підтримує дана реалізація конкретний токен. Цей метод використовується для визначення можливостей класів об'єктів, що реалізують інтерфейс DOMTokenList, який забезпечує впорядкований набір токенів, наприклад, для керування класами CSS елементів.

Метод supports() приймає один аргумент - рядок, що представляє токен, наявність підтримки якого потрібно перевірити. Метод повертає логічне значення true, якщо токен підтримується, і false - якщо ні. Це дозволяє додаткам визначати, чи можна використовувати певні токени у конкретній реалізації DOMTokenList.

Використання supports() найчастіше зустрічається у ситуаціях, коли потрібно гарантувати сумісність з різними браузерами або версіями специфікацій. Наприклад, перед використанням нового токену CSS можна перевірити чи він підтримується поточною реалізацією:

const element = document.getElementById('myElement');
const classes = element.classList;

if (classes.supports('new-css-token')) {
  classes.add('new-css-token');
} else {
  // Альтернативна обробка для браузерів, що не підтримують токен
}

У цьому прикладі ми отримуємо об'єкт DOMTokenList через властивість classList елементу. Потім використовуємо supports('new-css-token') для перевірки, чи підтримується токен new-css-token. Якщо так, ми додаємо його до списку класів елементу через метод add(). Інакше виконується альтернативний код.

Метод supports() також може бути корисним для визначення можливостей реалізації DOMTokenList перед використанням додаткових методів або властивостей. Наприклад, деякі реалізації можуть підтримувати нестандартні токени:

const supportsCustomTokens = classList.supports('custom-token');

if (supportsCustomTokens) {
  // Використовуємо нестандартні токени
} else {
  // Використовуємо лише стандартні токени
}

Загалом, DOMTokenList.supports() забезпечує зручний спосіб перевірки підтримки токенів у реалізації DOMTokenList, що допомагає написанню коду, сумісного з різними браузерами та версіями специфікацій. Це особливо важливо в контексті розробки веб-додатків, де різноманітність платформ вимагає ретельного тестування та обробки різних випадків.

правити

Порада

Використовуйте DOMTokenList.supports() для перевірки підтримки токенів, що відповідають за специфічну поведінку або функціональність. Це дозволить вам забезпечити правильну роботу коду в різних середовищах та браузерах. Наприклад, перевірка підтримки токену для реалізації темного режиму інтерфейсу.

автор: Bond правити

Порада

Пам'ятайте, що DOMTokenList.supports() перевіряє лише наявність підтримки токену, але не гарантує його правильну роботу. Завжди тестуйте свій код на різних платформах та в різних ситуаціях для забезпечення стабільної роботи.

автор: Bond правити

Порада

Використовуйте DOMTokenList.supports() для визначення можливостей реалізації DOMTokenList перед використанням додаткових методів або властивостей. Це дозволить уникнути помилок та оптимізувати код для конкретної реалізації. Наприклад:

const supportsCustomTokens = classList.supports('custom-token');

if (supportsCustomTokens) {
  // Використовуємо нестандартні токени
} else {
  // Використовуємо лише стандартні токени
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

supports(token)

Параметри

token

Рядок, що містить токен для запиту.

автор: Bond

правити

Повернення

boolean

Повертає логічне значення, яке вказує на те, чи був знайдений токен.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	49	49	10.1	36	17	—

Підтримка: мобільні переглядачі

Переглядач
	49	49	49	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<a id="hint" href="https://css.in.ua" rel="noopener">Посилання</a>

// supports() працює лише зі списками з визначеним набором токенів
// (rel посилання, sandbox фрейма). Класи можуть бути будь-які,
// тому на classList метод кидає помилку.
const relList = document.getElementById('hint').relList;

console.log("rel підтримує 'noopener':", relList.supports('noopener'));
console.log("rel підтримує 'vyhadka':", relList.supports('vyhadka'));

try {
    document.body.classList.supports('dark-mode');
} catch (error) {
    console.log('На classList — помилка:', error.name);
}

// Ще один список із визначеними токенами — sandbox у iframe
const iframe = document.createElement('iframe');

console.log(iframe.sandbox.supports('allow-scripts')); // true
console.log(iframe.sandbox.supports('allow-magic'));   // false

// а от класи не мають «дозволеного» переліку — supports там не працює