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() застарів і більше не рекомендується для використання через можливі проблеми сумісності.

правити

Порада

Якщо потрібно перевірити підтримку певної функції відповідно до конкретної версії специфікації, передайnt другий параметр version у isSupported(). Це допоможе забезпечити коректну роботу твого коду з різними версіями браузерів.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.isSupported(feature, version)

Параметри

feature

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

автор: Bond

правити

version

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

автор: Bond

правити

Повернення

boolean

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	48	3	12.1	12

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

Переглядач
	4.4	18	48	1

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

Переглядач
	-	-

Приклади

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

<div id="myElement">Старий вміст</div>

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

// Node.isSupported() застарів і вилучений з браузерів —
// наявність можливості перевіряють простим оператором in
if ('replaceWith' in element) {
    const newElement = document.createElement('p');
    newElement.textContent = 'Новий вміст';
    element.replaceWith(newElement);
} else {
    const newElement = document.createElement('p');
    newElement.textContent = 'Новий вміст';
    element.parentNode.replaceChild(newElement, element);
}

<div class="my-class">перший</div>
<div class="my-class">другий</div>

// isSupported() вилучено з браузерів; можливості перевіряють через 'in'
function getElements(selector) {
    if ('querySelectorAll' in document) {
        return document.querySelectorAll(selector);
    }

    // запасний шлях для дуже старих середовищ
    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;
}

console.log('Знайдено елементів:', getElements('.my-class').length);