«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Element.classList — это специальный объект, который хранит информацию о текущих классах элемента и содержит методы для работы с ними.

Свойство/объект classList даёт возможность просматривать и манипулировать классами элемента.

Здесь будут рассмотрены методы объекта ClassList: item, add, remove, toggle и contains. И одно из свойств объекта ClassList - свойство length.



Объект ClassList - Свойство length

Используя свойство length объекта ClassList, узнаем количество классов элемента.

Исходный HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   	<title>JavaScript</title>
   	<link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div id="first" class="btn-block">
      <button class="blue some"></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
    </div>
    
	<script src="script.js"></script>
  </body>
</html>

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

console.log(btns[0].classList.length);

Результат в консоли

2

Результат в Браузере

btns - переменная содержит псевдомассив - коллекцию элементов (в данном случае кнопок - тегов button). См. теорию - метод querySelectorAll.

Element.classList.length - такая запись позволяет узнать количество классов элемента.

В нашем случае btns[0].classList.length - это количество классов 1-ой кнопки.

Метод item свойства ClassList

Метод item свойства ClassList позволяет получить класс по индексу.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

console.log(btns[0].classList.item(0));

Результат в консоли

blue

Результат в Браузере

Первый класс у 1-ой кнопки - это blue.

Метод add - Добавить класс

Метод add свойства ClassList позволяет добавить класс.

Добавим к 1-ой кнопке класс red - изменим синий цвет кнопки на красный.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

btns[0].classList.add('red');

DevTools - Вкладка Elements

<button class="blue some red"></button>

Результат в Браузере

В результате в DevTools (в средствах веб-разработки) можно увидеть - добавился класс red.

Метод add позволяет добавлять несколько классов. При этом они перечисляются через запятую.

Метод remove - Удалить класс

Метод remove свойства ClassList позволяет удалить класс.

Удалим класс blue.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

btns[0].classList.add('red');
btns[0].classList.remove('blue'); // Удаляем класс blue

DevTools - Вкладка Elements

<button class="some red"></button>

Результат в Браузере

В результате мы удалили класс blue.

Метод toggle - Чередовать класс элемента

Метод toggle свойства ClassList позволяет чередовать класс элемента: добавить класс, если его нет и удалить, если он есть.

Вернем класс blue.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

btns[0].classList.add('red');
btns[0].classList.remove('blue');  // Удаляем класс blue
btns[0].classList.toggle('blue');  // Добавляем класс blue

DevTools - Вкладка Elements

<button class="some red blue"></button>

Результат в Браузере

В результате мы снова добавили класс blue. Теперь он на последнем месте.

Метод contains - Наличие класса у элемента

Метод contains свойства ClassList проверяет наличие класса у элемента.

Метод contains часто используется при составлении условий.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

// Добавляем класс 'red' для 2-ой кнопки
btns[1].classList.add('red');

// Проверяем существование класса 'red'
if(btns[1].classList.contains('red')){
    console.log('red');
}

Результат в консоли

red

Результат в Браузере

В результате для 2-ой кнопки добавлен класс red. И при помощи условия сделана проверка его наличия.

Если класса нет - метод contains возвращает false.

Свойство ClassList - Практический пример

Здесь мы реализуем следующее: при клике по первой кнопке проверим - есть ли класс red у второй кнопки.

Если класса нет, то добавим его. Если он есть - то удалим.

Вариант №1 - Условие if-else

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

// 1. Событие "Клик по 1-ой кнопке"
// 2. Если класса 'red' нет, то добавляем его
// 3. Иначе удаляем класс 'red'

btns[0].addEventListener('click', () => {
    if (!btns[1].classList.contains('red')) {  
        btns[1].classList.add('red');
    }
    else { 
        btns[1].classList.remove('red');    
    }
});

Результат в Браузере

Итак, здесь мы сначала проверяем - есть ли класс у элемента (classList.contains). А потом либо добавляем его (classList.add), либо удаляем (classList.remove).

Вариант №2 - Метод toggle

В данном случае есть возможность оптимизировать код, воспользовавшись методом toggle.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

btns[0].addEventListener('click', () => {
	btns[1].classList.toggle('red');
});

Результат в Браузере

Здесь метод toggle делает то же самое, что код с условием if-else в примере выше.

На практике метод toggle не всегда применим. Иногда лучше составлять условие if-else (как в Варианте №1 ).

Свойство className - Устарело

Свойство className устарело (работать с ним не удобно) и оно не рекомендовано для использования.

JavaScript-код

'use strict';

const btns = document.querySelectorAll('button');

console.log(btns[0].className);

Результат в консоли

blue some

Результат в Браузере

Как видно из примера, свойство className возвращает все классы элемента в виде одной строки. Дальше как-то работать с классами можно, но делать это не удобно.

Здесь были рассмотрены методы объекта ClassList: item, add, remove, toggle и contains, которые позволяют манипулировать классами элемента - получить класс, добавить и удалить, чередовать классы и проверять их наличие.

Тема следующей статьи - Делегирование событий - как отслеживать события на множестве элементов.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки