JavaScript с нуля - [60]
Эти неудобства может сгладить гораздо более приятный API, который делает добавление и удаление значений классов из элемента до смешного легким. Этот новый API известен как classList. Он предоставляет набор методов, которые упрощают работу со значениями классов:
• 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 предоставляет ряд свойств, которые можно совмещать с уже известными техниками.
Поехали!
Поиск пути
Прежде чем найти элементы и работать с ними, важно понять, где они находятся. Самый простой способ решить эту проблему — начать сверху и постепенно спускаться, что мы и сделаем.
Вид вершины нашей DOM представлен элементами window, document и html (рис. 28.2).
Рис. 28.2. Вид вершины этого дерева всегда одинаков
В связи с повышенной важностью этих трех элементов DOM предоставляет к ним легкий доступ посредством window, document и document.documentElement:
let windowObject = window; // хм-м….
