JavaScript. Подробное руководство, 6-е издание, стр. 244

Подобно другим классам коллекций в модели DOM, объект

DOMTokenList

является «живым» представлением множества классов в элементе, а не статическим слепком, который был действителен только в момент обращения к свойству

classList

. Если сценарий получит объект

DOMTokenList

, обратившись к свойству

classList

элемента, и затем изменит свойство

className

этого элемента, то выполненные изменения немедленно отразятся на полученном объекте

DOMTokenList

. Аналогично любые изменения, выполненные в объекте

DOMTokenList

, немедленно отразятся на значении свойства

className

На момент написания этих строк свойство

classList

не поддерживалось ни одним из текущих броузеров. Однако эту удобную функциональность легко можно реализовать самому, как показано в примере 16.5. Подобная реализация, позволяющая интерпретировать атрибут

class

элемента как множество имен классов, существенно упрощает выполнение многих задач, связанных с обработкой CSS.

Пример 16.5.

classList()

: интерпретирует
className
, как множество CSS-классов

//

<b>* Возвращает свойство classList элемента е. если оно содержит один класс.</b>

* Иначе возвращает объект, имитирующий интерфейс DOMTokenList.

<b>* Возвращаемый объект имеет методы contains(), add(), remove(), toggle() и toString(),</b>

<b>* позволяющие проверять и изменять набор классов элемента е. Если свойство classList</b>

<b>* имеет встроенную поддержку в броузере, функция возвращает объект, подобный массиву,</b>

<b>* который имеет свойство length и поддерживает возможность индексирования массива.</b>

<b>* Имитация объекта DOMTokenList не подобна массиву, но имеет метод toArray().</b>

* который возвращает истинный массив имен классов элемента.

*/

function classList(e) {

 if (е.classList) return e.classList; // Вернуть e.classList, если имеется

 else return new CSSClassList(e); // Иначе попытаться подделать его

}

// CSSClassList - класс JavaScript, имитирующий объект DOMTokenList 

function CSSClassList(e) { this.e = e; }

// Возвращает true, если e.className содержит класс с, иначе - false 

CSSClassList.prototype.contains = function(c) {

 // Проверить, является ли с допустимым именем класса 

 if (с.length === 0 || c.indexOf(" ") != -1)

 throw new Error("Недопустимое имя класса: + с + .....);

 // Сначала проверить общие случаи

 var classes = this.e.className;

 if (!classes) return false; // e вообще не имеет классов

 if (classes === c) return true; // e имеет единственный класс,

<b>                                  // имя которого точно совпадает с искомым</b>

 // Иначе использовать RegExp для поиска с как отдельного слова 

 // \b - в регулярных выражениях соответствует границе слова,

 return classes.search(”\\b" + с + "\\b") != -1;

};

<b>// Добавляет имя класса с в е.className, если оно отсутствует в списке </b>

CSSClassList.prototype.add = function(c) {

 if (this.contains(c)) return; // Ничего не делать, если имя уже в списке

 var classes = this.e.className;

 if (classes && classes[classes.length-1] != " ")

 c = " " + с; // Добавить пробел, если необходим

 this.е.className += с; // Добавить имя с в className

};

// Удаляет все вхождения с из е.className 

CSSClassList.prototype.remove = function(c) {

 // Убедиться, что с - допустимое имя класса 

 if (с.length === 0 || c.indexOf(" ") != -1)

 throw new Error("Недопустимое имя класса: + с + .....);

<b>  // Удалить все вхождения имени с как слова и все завершающие пробелы</b>

 var pattern = new RegExp("\\b" + с + '\\b\\s*'\ "g");

 this.e.className = this.e.className.replace(pattern, "");

};

<b>// Добавляет имя с в e.className, если оно отсутствует в списке, и возвращает true.</b>

<b>// Иначе удаляет все вхождения имени с из e.className и возвращает false.</b>