1.classlist
document.getElementById("myDIV").classList.add("mystyle");
classList 属性返回元素的类名,作为 DOMTokenList 对象。
该属性用于在元素中添加,移除及切换 CSS 类。
classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。
返回值:一个 DOMTokenList, 包含元素的类名列表
方法 | 描述 |
---|---|
add(class1, class2, ...) | 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 |
contains(class) | 返回布尔值,判断指定的类名是否存在。
可能值:
|
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;
}
}