JavaScript с нуля

• add;

• remove;

• toggle;

• contains.

Назначение этих методов угадывается из их имен, но все же давайте их изучим внимательнее.

Добавление значений классов

Чтобы добавить значение класса элементу, получите ссылку на этот элемент и вызовите для него метод add через classList:

let divElement = document.querySelector("#myDiv");

divElement.classList.add("bar");

divElement.classList.add("foo");

divElement.classList.add("zorb");

divElement.classList.add("baz");

console.log(divElement.classList);

После выполнения этого кода элемент div будет иметь следующие значения класса: bar, foo, zorb, baz. API classList берет на себя добавление пробелов между значениями классов. Если же мы укажем недопустимое значение класса, API classList будет ругаться и добавлять его не станет. Если мы прикажем методу add добавить класс, уже существующий в элементе, то код по-прежнему будет выполняться, но повторяющееся значение класса добавлено не будет.

Удаление значений классов

Для удаления значения класса мы можем вызвать метод remove также через classList:

let divElement = document.querySelector("#myDiv");

divElement.classList.remove("foo");

console.log(divElement.classList);

После выполнения этого кода значение класса foo будет удалено и останутся только bar, baz и zorb. Несложно, правда?

Переключение значений класса

Для многих сценариев стилизации применяется стандартный рабочий процесс. Во-первых, мы проверяем, существует ли значение класса в элементе. Если да, мы удаляем его из элемента. Если же нет, то мы, наоборот, его добавляем. Чтобы упростить этот тривиальный шаблон переключения, API classList предоставляет метод toggle:

let divElement = document.querySelector("#myDiv");

divElement.classList.toggle("foo"); // удаляет foo

divElement.classList.toggle("foo"); // добавляет foo

divElement.classList.toggle("foo"); // удаляет foo

console.log(divElement.classList);

Метод toggle при каждом вызове добавляет указанное значение класса в элемент или удаляет его. В нашем случае класс foo при первом вызове метода toggle удаляется. Во второй раз класс foo, наоборот, добавляется. В третий раз снова удаляется. Думаю, суть вы уловили.

Проверка наличия значения класса

Последним рассмотрим метод contains:

let divElement = document.querySelector("#myDiv");

if (divElement.classList.contains("bar") == true) {

// делает что-нибудь

}

Этот метод проверяет, существует ли указанное значение класса в элементе. Если да, то возвращается true, если нет — false.

Углубление

Как вы видите, API classList предоставляет почти все, что нужно для удобного добавления, удаления или проверки значений классов в элементе. Ключевое слово «почти». О том немногом, что этот API все же не предлагает по умолчанию, можно почитать в моей статьеhttp://bit.ly/kClassList, рассказывающей о многих других возможностях classList.

КОРОТКО О ГЛАВНОМ

Итак, теперь у вас есть два отличных основанных на JavaScript подхода для стилизации элементов. Если есть возможность модифицировать CSS, рекомендую стилизовать элементы посредством добавления и удаления классов. Причина связана с тем, что такой подход существенно упрощает обслуживание кода. Гораздо легче добавлять или удалять свойства стилей из правила стиля в CSS, чем добавлять и удалять строки кода JavaScript.

Остались вопросы? Дружелюбные форумчане ответят вам. Обращайтесь на https://forum.kirupa.com!

Глава 28. Перемещение по DOM

Как вы уже поняли, DOM — это огромное дерево с ветвями, на которых висит множество элементов. Если выразиться более точно, элементы в DOM упорядочены иерархически (рис. 28.1), определяя то, что мы в итоге видим в браузере.

Рис. 28.1. DOM и браузер неразрывно связаны

Эта иерархия помогает нам организовывать HTML-элементы. Помимо этого, она объясняет CSS, какие стили и к чему применять. С точки же зрения JavaScript эта иерархия привносит некоторую сложность, и нам придется тратить немало времени, определяя, где именно в DOM мы находимся в данный момент и куда хотим попасть. Это станет более очевидно, когда мы взглянем на создание новых элементов или их перемещение. С этой сложностью важно научиться ладить и чувствовать себя комфортно.

Этому и будет посвящена данная глава. Чтобы понять, как с легкостью переходить от ветви к ветви, DOM предоставляет ряд свойств, которые можно совмещать с уже известными техниками.