classlist和array.prototype.slice.call

1.classlist

document.getElementById("myDIV").classList.add("mystyle");

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

返回值：一个 DOMTokenList, 包含元素的类名列表

方法	描述
add(class1, class2, ...)	在元素中添加一个或多个类名。 如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。 可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index)	返回类名在元素中的索引值。索引值从 0 开始。 如果索引值在区间范围外则返回 null
remove(class1, class2, ...)	移除元素中一个或多个类名。 注意： 移除不存在的类名，不会报错。
toggle(class, true|false)	在元素中切换类名。 第一个参数为要在元素中移除的类名，并返回 false。  如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如： 移除一个 class: element.classList.toggle("classToRemove", false);  添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

2.array.prototype.slice.call

在很多时候经常看到Array.prototype.slice.call()方法，比如Array.prototype.slice.call(arguments)，下面总结一下其原理：

2.1 在JS里Array是一个类 slice是此类里的一个方法 ，那么使用此方法应该Array.prototype.slice这么去用

slice从字面上的意思很容易理解就是截取

arrayObj.slice(start, [end])

2.2 call 

call([thisObj[,arg1[arg2[[argN]]]]])

thisObj是一个对象的方法

arg1~argN是参数

Array.prototype.slice.call(arguments,1);

这句话的意思就是说把调用方法的参数截取出来。

如：

function test(a,b,c,d)    {
     var arg = Array.prototype.slice.call(arguments,1);
     alert(arg);
 }
test("a","b","c","d"); //b,c,d

Array.prototype.slice.call(arguments, 1)，不就是等于 arguments.slice(1) 吗？答案是否定的

因为arguments并不是真正的数组对象，只是与数组类似而已，所以它并没有slice这个方法（slice本来只是Array和 String的方法），而

Array.prototype.slice.call(arguments, 1)

可以理解成是让arguments转换成一个数组对象，让arguments具有slice()方法。要是直接写arguments.slice(1)会报错。

var a={length:2,0:'first',1:'second'};//类数组,有length属性，长度为2，第0个是first，第1个是second
console.log(Array.prototype.slice.call(a,0));// ["first", "second"],调用数组的slice(0);
var a={length:2,0:'first',1:'second'};console.log(Array.prototype.slice.call(a,1));//["second"]，调用数组的slice(1);
var a={0:'first',1:'second'};//去掉length属性，返回一个空数组console.log(Array.prototype.slice.call(a,0));//[]
function test(){  console.log(Array.prototype.slice.call(arguments,0));//["a", "b", "c"]，slice(0)  
console.log(Array.prototype.slice.call(arguments,1));//["b", "c"],slice(1)}test("a","b","c");

核心：Array.prototype.slice.call(arguments)可以将 类数组 转化为真正的数组。

补充：

什么是类数组（有length属性，属性值为数字；其他属性值为数字‘0’，‘1’，等）

var myobject ={ // array-like collection
    length: 4,
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three'
}  

3.将函数的实际参数转为数组的方法

方法一

var args = Array.prototype.slice.call(arguments);

方法二

var args = [].slice.call(arguments, 0);

方法三

var args = []; 
for (var i = 1; i < arguments.length; i++) {     
args.push(arguments[i]);
}

最后，附个转成数组的通用函数

var toArray = function(s){    
try{return Array.prototype.slice.call(s);    
} 
catch(e){
var arr = [];
for(var i = 0,len = s.length; i < len; i++){//arr.push(s[i]);   
arr[i] = s[i];  //据说这样比push快} 
return arr;    
}
}

参考：http://www.th7.cn/web/js/201511/133059.shtml