JS метод Element.isSupported()

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

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

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

Синтаксис використання isSupported() методу є наступним:

node.isSupported(feature, version);

Тут node є об'єктом Node, feature - рядок, що представляє функцію або можливість, яку потрібно перевірити, а version (необов'язковий параметр) - рядок, що вказує версію специфікації, для якої потрібно перевірити підтримку.

Наприклад, для перевірки підтримки методу replaceWith() в поточній версії браузера можна використати наступний код:

const supportsReplaceWith = Node.prototype.isSupported('replaceWith');

if (supportsReplaceWith) {
  // Використовуємо метод replaceWith()
} else {
  // Альтернативний код для браузерів, які не підтримують replaceWith()
}

Якщо потрібно перевірити підтримку певної функції для конкретної версії специфікації, можна додати другий параметр:

const supportsQuerySelector = Node.prototype.isSupported('querySelectorAll', '3.0');

Цей код перевірить, чи підтримує поточний браузер метод querySelectorAll відповідно до специфікації версії 3.0.

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

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

Метод isSupported() застарів і більше не рекомендується для використання через можливі проблеми сумісності.

Синтаксис

element.isSupported(feature, version)

Параметри

*feature

Рядок, що представляє функцію або можливість, яку потрібно перевірити на підтримку.

version

Рядок, що вказує версію специфікації, для якої потрібно перевірити підтримку певної функції або можливості.

Return

boolean

Повертає булеве значення: true, якщо функція або можливість, вказана в аргументі feature, підтримується в поточному браузері та версії специфікації (якщо вказано аргумент version), інакше - false.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

// Отримуємо елемент для заміни
const element = document.getElementById('myElement');

// Перевіряємо підтримку методу replaceWith()
if (Node.prototype.isSupported('replaceWith')) {
  // Якщо підтримується, використовуємо replaceWith()
  element.replaceWith('<p>Новий вміст</p>');
} else {
  // Якщо не підтримується, використовуємо альтернативний спосіб
  const newElement = document.createElement('p');
  newElement.textContent = 'Новий вміст';
  element.parentNode.replaceChild(newElement, element);
}

// Функція для отримання елементів
function getElements(selector) {
  // Перевіряємо підтримку querySelector() для версії 3.0 специфікації
  if (Node.prototype.isSupported('querySelector', '3.0')) {
    // Якщо підтримується, використовуємо querySelector()
    return document.querySelectorAll(selector);
  } else {
    // Якщо не підтримується, використовуємо альтернативний спосіб
    const elements = [];
    const nodes = document.getElementsByTagName('*');
    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].matches(selector)) {
        elements.push(nodes[i]);
      }
    }
    return elements;
  }
}

// Використання функції
const elements = getElements('.my-class');
console.log(elements);