element.classList属性及方法应用

element.classList属性用于返回一个元素的className集合，并且该属性拥有add，remove，toggle，contains方法，详见：https://developer.mozilla.org/en-US/docs/DOM/element.classList。

一般我们再操作dom节点的className时经常会有以下4个需求：

1. 判断该节点是否存在某个className
2. 移除某个节点上的指定className
3. 为某个节点添加指定的className
4. 在某个节点上进行指定的两个或多个className的切换

对于以上4个功能需求我们以前的做法一般是利用正则表达式进行匹配，匹配成功后进行替换，移除等操作，但目前对于firefox3.6、chrome8等高级浏览器已经支持element.classList属性及相应方法，所以可以改进以上4种需求的实现。

1. 对于某个节点上是否存在某个className的判断方法hasClassName()：

 

1. dom.hasClassName = function(node, classname) {
2. var cn = node.className;
3. if(classname && node.classList && node.classList.contains){ //浏览器特性判断是否支持classList及对应的contains方法
4. return node.classList.contains(classname);
5. } else{ //对于不支持classList及对应的contains方法使用indexOf进行字符窜匹配
6. if( (' '+cn+' ').indexOf(' '+classname+' ')===-1 ){
7. return false;
8. } else{
9. return true;
10. }
11. }
12. };

 

2. 移除某个节点上指定的className，removeClassName()：

 

1. dom.removeClassName = function (node, _className){
2. var obj = node;
3. if(_className && obj && obj.classList && obj.classList.remove){//浏览器特性判断是否支持classList及对应的remove方法
4. obj.classList.remove(_className);
5. } else{
6. obj.className = obj.className.replace( new RegExp("\\b" + _className + "\\b"), "");
7. }
8. };

3.为某个节点添加指定的className

 

 

1. dom.addClassName = function(node, className) {
2. var cn = node.className;
3. if(className && node && node.classList && node.classList.add){//浏览器特性判断是否支持classList及对应的add方法
4. node.classList.add(className);
5. } else{
6. if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){
7. node.className = cn+ ' '+className;
8. }
9. }
10. };

4.在某个节点上进行指定的两个或多个className的切换

 

1. 1. dom.toggle = function(node,className){
   2. node = $E(node) || node;
   3. var classList = node.classList;
   4. if(typeof className === "undefined" || className === ""){//当没有传递className参数时，做hidden和show的切换
   5. if(node.style.display !== 'none'){
   6. node.style.display = 'none';
   7. } else{
   8. node.style.display = '';
   9. }
   10. return;
   11. }
   12. if(classList && classList.toggle){//传递了className参数时做浏览器特性判断，判断是否支持classList及对应的toggle方法
   13. node.classList.toggle(className);
   14. } else{
   15. if(dom.hasClassName(node,className)){
   16. dom.removeClassName(node,className);
   17. } else{
   18. dom.addClassName(node,className);
   19. }
   20. }
   21. };

 

转自https://blog.csdn.net/sky_jser/article/details/8108098

转载于:https://www.cnblogs.com/Ting-log/p/9617874.html