dom.classList

今天逛贴吧无意中发现classList的新属性,
classList是className的升级版,
问:classList的给我们带来的什么?
答:1:我们可以方便的实现对Dom的class属性进行操作(增加,修改,删除)了;
2:添加此节点已经存在的类名会自动过滤

具体代码如下:

js 代码:
window.onload=function () {   
   var tDom=document.getElementById("testD"); 
   if(tDom.className==tDom.classList.toString()){        
        console.log(JSON.stringify(tDom.classList)); 
    }    
  var _domClassList=tDom.classList;  
      _domClassList.adds("d2 d3 d2 d4");
   //添加多个属性自己扩展!
   //此时dom渲染的class值并已经改变; 
   console.log(_domClassList.contains("d"));//true 是否存在d 类名;    
   _domClassList.remove("d"); //删除   
   console.log(_domClassList.item(1));//获取
  //** if visible is set remove it, otherwise add it
  _domClassList.toggle("visible");
};

DOMTokenList.prototype.adds = function(tokens) {   
       tokens.split(" ").forEach(function(token) {  
          this.add(token);   
       }.bind(this));  
        return this;
};

html:
hello! classList

你可能感兴趣的:(dom.classList)