在html5新增的classList之前， 操作元素的class用的是className这个属性，而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理，如下， 下面的代码你未必能看得懂运行流程，但应该能看懂功能部分，这几段函数是取自我录制的一套视频中，讲解DOM框架封装的一部分
gQuery.prototype.hasClass = function (obj, cName) {
// <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div>
return obj.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
}
gQuery.prototype.addClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (!this.hasClass(this.elements[i], cName)) {
// hello abc // abc
this.elements[i].className += " " + cName;
this.elements[i].className = this.trim(this.elements[i].className);
}
}
return this;
}
gQuery.prototype.removeClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (this.hasClass(this.elements[i], cName)) {
var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');
this.elements[i].className = this.elements[i].className.replace(re, " ");
this.elements[i].className = this.trim(this.elements[i].className);
}
}
return this;
}
gQuery.prototype.toggleClass = function (cName) {
for (var i = 0; i < this.elements.length; i++) {
if (this.hasClass(this.elements[i], cName)) {
this.removeClass(cName);
} else {
this.addClass(cName);
}
}
return this;
}
这里，我还写了一个独立的删除某个class的功能:
<div class="box1 box2 box3">this is a test string</div>
<input type="button" value="移除某个class">
<script>
var oDiv = document.querySelector("div"),
classNames = '',
oBtn = document.querySelector("input");
oBtn.onclick = function(){
classNames = oDiv.className.split(/\s+/);
var pos = -1, i, len;
for( i = 0, len = classNames.length; i < len; i++ ) {
if( classNames[i] == 'box2' ) {
pos = i;
break;
}
}
classNames.splice( i, 1 );
oDiv.className = classNames.join( " " );
} </script>
思路非常的简单，获取div元素中的所有class, 用split 按空格切割，就会得到[box1,box2,box3]这样的数组， 然后遍历判断，是否有box2这个class？
找到之后就把当前数组的索引记下来，最后再用splice把该class从数组删除得到[box1,box3] 然后把数组的每一项用join函数中的空格连接，再赋值
给元素的className.
而在html5中，每个元素都有classList这个属性， classList是一个类数组结构, 提供了4个操作class的方法: add,remove,toggle,contains,
看到这几个英文单词，你已经知道什么意思了吧，尤其对于使用过jquery的朋友
add( 添加class), remove( 删除class), toggle( 切换class) contains( 判断是否包含某个class )
<div id="box" class="box1 box2 box3">this is a test string</div>
<input type="button" value="添加class" id="btn-add">
<input type="button" value="移除class" id="btn-remove">
<input type="button" value="切换class" id="btn-toggle">
<script>
var G = function (id) { return document.querySelector(id); }
var oBtnAdd = G('#btn-add'),
oBtnRemove = G('#btn-remove'),
oBtnToggle = G('#btn-toggle'),
oBox = G('#box');
oBtnAdd.onclick = function(){
oBox.classList.add( 'box4' );
}
oBtnRemove.onclick = function(){
if( oBox.classList.contains('box1') ) {
oBox.classList.remove( 'box1' );
}
}
oBtnToggle.onclick = function(){
oBox.classList.toggle( 'box4' );
}
</script>