JS метод DOMTokenList.replace()

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

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

Метод replace() приймає два аргументи: токен, який потрібно замінити, і новий токен, який має зайняти його місце. Якщо перший токен присутній у списку класів, він буде видалений і замінений другим токеном. Якщо першого токена немає у списку, метод не робить нічого і не викликає помилок. Це забезпечує безпечне використання методу без необхідності перевірки наявності класу перед заміною.

Розглянемо базовий приклад використання методу replace(). Припустимо, у нас є HTML-елемент з кількома класами:

<div id="myElement" class="class1 class2"></div>

Ми хочемо замінити клас class1 на class3. Використовуючи метод replace(), це можна зробити наступним чином:

const element = document.getElementById('myElement');
element.classList.replace('class1', 'class3');

Після виконання цього коду елемент матиме класи class3 і class2 замість class1 і class2.

У випадку, коли токен для заміни відсутній, метод не викликає помилок. Наприклад:

const element = document.getElementById('myElement');
element.classList.replace('nonexistentClass', 'newClass');

У цьому прикладі, оскільки nonexistentClass відсутній у списку класів, жодних змін не відбудеться.

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

const button = document.getElementById('toggleButton');
button.addEventListener('click', () => {
    const element = document.getElementById('myElement');
    element.classList.replace('inactive', 'active');
});

У цьому прикладі при кожному натисканні кнопки клас inactive буде замінений на active, що дозволяє динамічно змінювати стиль елемента.

Ще один корисний випадок використання методу replace() – це робота з анімаціями та переходами. Наприклад, можна змінювати класи, щоб запускати анімації при певних умовах:

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

function startAnimation() {
    element.classList.replace('start', 'animate');
}

element.addEventListener('animationend', () => {
    element.classList.replace('animate', 'end');
});

startAnimation();

У цьому прикладі спочатку клас start замінюється на animate, що запускає анімацію. Після завершення анімації клас animate замінюється на end, що може сигналізувати про завершення анімації та виконати відповідні дії.

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

Синтаксис

replace(oldToken, newToken)

Параметри

*oldToken

Рядок, що представляє клас, який потрібно замінити.

*newToken

Рядок, що представляє новий клас, на який буде замінено oldToken.

Return

boolean

Повертає логічне значення, яке дорівнює true, якщо oldToken був успішно замінений, або false, якщо ні.

Переглядачі

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

Приклади

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

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

// Елемент спочатку має клас 'original'
element.classList.add('original');

// Замінюємо клас 'original' на 'updated'
element.classList.replace('original', 'updated');

<input type="text" id="classInput" placeholder="Введіть класи для заміни">
<button id="replaceClassesBtn">Замінити класи</button>
<div id="myElement" class="box highlight bordered"></div>

<script>
const element = document.getElementById('myElement');
const classInput = document.getElementById('classInput');
const replaceClassesBtn = document.getElementById('replaceClassesBtn');

replaceClassesBtn.addEventListener('click', () => {
  const classesToReplace = classInput.value.split(' ');
  const newClasses = classInput.value.split(' ');

  classesToReplace.forEach((oldClass, index) => {
    element.classList.replace(oldClass, newClasses[index]);
  });

  classInput.value = '';
});
</script>