HTML 5的革新——HTML5 classList

曾经编写DOM函数库关于类名的方法时,发现不管是增加类名、删除类名还是更高端一点的切换类名、替代类名,有一个问题始终得是解决:就是类名是否存在类名属性中。而解决方法不外乎JS自身的字符串方法或者利用正则匹配,你是不是也觉得很麻烦。不过在支持HTML5新增的API:classList ,这个问题已经不存在了。

浏览器兼容情况

classList出来也很久了,所以 PC上FireFox、Chrome都支持的很好。IE中IE10也开始支持。

移动端上,Android 3.0+以上才开始支持,而现在手机web app要求android 2.*也要支持,所以还得纠结。

最新的兼容可以查看Can I use

classList API

classList 包含如下有用的方法:

{
	length: {number}, 
	add: function() { ... },
	contains: function() { ... },
	item: function() { ... }, /* 通过 索引值 */
	remove: function() { ... },
	toggle: function() { ... }
}	
		
<div id=”good-1″>1</div>
<div id=”good-2″ class=”class-1″>2</div>
<div id=”good-3″ class=”class-1 class-2″>3</div>
<input type=”button” value=”toggle” name=”btn-toggle”>
<script>
var good3 = document.getElementById(‘good-3’);
console.log(good3.classList);
</script>

示例html代码

如上代码将会看到如下图:

HTML 5的革新——HTML5 classList
  • length:类名的个数,只读
  • item():只有一个参数即:索引值,返回相对应的类名。

    以上代码为例的话 console.log(good3.classList.item(2))则会输出class-3

  • add():增加一个类名。如果新增类名已经存在,则忽略。

    以上代码为例的话

    var good2 = document.getElementById('good-2');	
    good2.classList.add('class-2');
    console.log(good2.classList.length) // 2
    good2.classList.add('class-1'); 
    console.log(good2.classList.length) // 2 class-1已经存在,则忽略
    				

  • remove():移除一个类名。如果移除类名已经不存在,则忽略。

    还是拿第一个实例HTML

    var good3 = document.getElementById('good-2');	
    good3.classList.remove('class-2');
    console.log(good3.classList.length) // 2
    good3.classList.remove('class-2'); 
    console.log(good3.classList.length) // 2 class-1已经不存在,则忽略	
    			
  • toggle():有则移除,并返回false;无则添加类名,并返回true。:

    继续以上实例

    document.getElementsByName('btn-toggle')[0].addEventListener('click',function(){
    	contain4.classList.toggle('class-4'); 
    	console.log( contain4.classList.toggle('class-4') ) // 移除返回true;增加返回false
    })	
    			
  • contains():跟Jquery中的hasClass()类似。

    如下代码

    good3.classList.contains('class-3'); // false 因为不包含此类名。 	
    			
  • 最后一个方法 toString() ,此方法继承自更高对象,等同于 className
    good3.classList.toString() === good3.className; // true
    			

classList改良

在 jQuery 中addClass(),removeClass(),replaceClass()以空格分割可以操作多个类名。而classList虽然解决一个不用判断要操作的类名是否存在这个问题,但 add或remove或toggle还是不能操作多个类名。所以稍微改造如下:

var DomTokenList = function () {
	var addClass,
		removeClass,
		toggleClass;
	addClass = function(node, classes){
		var classes = classes.split(' '),
			i = 0,
			len = classes.length;
		for ( i; i < len; i++ ) {
			node.classList.add(classes[i]);
		}
	};
	removeClass = function(node, classes){
		var classes = classes.split(' '),
			i = 0,
			len = classes.length;
			for ( i; i < len; i++ ) {
				node.classList.remove(classes[i]);
			}
	};
	toggleClass = function(node, classes){
		var classes = classes.split(' '),
			i = 0,
			len = classes.length;
		for ( i; i < len; i++ ) {
			node.classList.toggle(classes[i]);
		}	
	};
	replaceClass = function(node, oldClass, newClasses){
		var i = 0,
	        old_array = oldClass.split(' '),
	        new_array = newClasses.split(' '),
	        j = 0,
	        ii = oldClass.length,
	        jj = new_array.length;

	    for(i; i < ii; i++) {
	        node.classList.remove(old_array[i]);
	    }

	    for(j; j < jj; j++) {
	        node.classList.add(new_array[j]);
	    }
	}
	return {
		addClass : addClass,
		removeClass : removeClass,
		replaceClass : replaceClass,
		toggleClass : toggleClass
	}
}();
		
classList扩展

最后,如果自己公司产品用户使用的都是高级浏览器,可以耍耍了。

本文源链接:http://www.html5jscss.com/html5-classlist.html

转载请注明《HTML 5的革新——HTML5 classList》| html5jscss

评论关闭了.