查看HTML元素的classList元素将返回类型为DOMTokenList的对象,所以我们要研究的是该对象的属性和方法。
该类型的对象描述了一个用空格分隔的字符串数组,数组的每一项代表该元素的一个类名。HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList等方法都会返回该对象。
属性:
- length -- 只读属性,对于classList,它指示有多少个类名
方法:
- item(idx) -- 返回指定位置的项。如果未找到,则返回undefined,某些版本的浏览器返回null;
- contains(token) -- 如果数组中包含指定的元素,返回true,否则返回false;对于classList,该方法相当于jQuery中的hasClass方法;
- add(token) -- 向数组中添加元素。对于classList该方法相当于jQuery中的addClass
- remove(token) -- 移除指定的元素。对于classList该方法相当于jQuery中的removeClass方法;
- toggle(token) -- 切换某个元素。对于classList该方法相当于jQuery中的toggleClass方法;
简单的案例
var elemClassList = document.querySelector('#Bubby').classList, classNum = elemClassList.length; elemClassList.add('sexy'); elemClassList.remove('sexy'); elemClassList.toggle('fat'); if( elemClassList.contains('nipple') ){ console.info('OH YEAH'); }
模拟一下jQuery的addClass和removeClass
var Sys = { addClass: function (elem, value) { // 如果没有传递元素 if (!elem) return; var arr = []; // 如果只有一个元素 if (elem.nodeType) arr.push(elem); // 如果传递了HTML元素集合,如NodeList或HTMLCollection if (elem.length) { for (var j = 0, ln = elem.length; j < ln; j++) { // 只处理HTML标签元素 if (elem[j].nodeType) arr.push(elem[j]); } } // 为每一个元素添加类名 for (var i = 0, len = arr.length; i < len; i++) { var elem = arr[i]; if (elem.nodeType === 1 && elem.className.indexOf(value) < 0 ) { elem.classList.add(value); } } }, removeClass: function (elem, value) { var arr = []; if (!elem) return; // 如果只传递一个HTML元素 if (elem.nodeType) arr.push(elem); // 如果传递了HTML元素集合 if (elem.length) { for (var j = 0, ln = elem.length; j < ln; j++) { // 只处理HTML标签元素 if (elem[j].nodeType) arr.push(elem[j]); } } for (var z = 0, len = arr.length; z < len; z++) { var elem = arr[z]; if (elem.nodeType === 1 && elem.className.indexOf() >= 0) { elem.classList.remove(value); } } } };