<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></head>
<body>
<div>1</div>
<div>2</div>
<p>3</p>
<p>4</p>
</body>
</html>
上面是一个简单的html页面，现在我们要用原生的javascript来操作
- 1.获取所有div，并改变所有div的背景
- 2.获取所有p标签，并改变p标签的背景
var divs = document.getElementsByTagName('div');
var ps = document.getElementsByTagName('p');
for (var i = 0; i < divs.length ; i++) {
divs[i].style.backgroundColor = 'red';
}
for (var l = 0; l < ps.length ; l++) {
ps[l].style.backgroundColor = 'blue';
}
这样写可以达到满足要求，但是代码冗余，所以我们要进行方法的封装。（首先封装获取dom的方法）
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var divs = _gT('div');
var ps = _gT('p');
for (var i = 0; i < divs.length ; i++) {
divs[i].style.backgroundColor = 'red';
}
for (var l = 0; l < ps.length ; l++) {
ps[l].style.backgroundColor = 'blue';
}
首先我们分析，写了2个for循环，是否可以把for循环也封装起来。
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var divs = _gT('div');
var ps = _gT('p');
var _each = function(arr, color){
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor = color;
}
};
_each(divs, 'red');
_each(ps, 'blue');
封装完成，但是还有问题，那如果我不想改变背景颜色了，我要改成背景图片，这个时候怎么写呢？（继续在 _each 的方法里加？当然不行！）
var _gT = function(tag){
return document.getElementsByTagName(tag);
};
var _each = function(arr, fn){
for (var i = 0; i < arr.length; i++) {
fn(i, arr[i]);
}
};
var divs = _gT('div');
var ps = _gT('p');
_each(divs, function(i, v){
v.style.backgroundColor = 'red';
});
_each(ps, function(i, v){
v.style.backgroundColor = 'blue';
});
这样就结束了吗，当然没有，上面的代码中，获取dom的方法和循环的each方法我们都调用了2次，还可以继续优化？（很明显是可以的。）隐式迭代
var _gT = function(tag, results){
results = results || [];
//将获取的每一个元素保存到新数组中，若不使用 apply 则一个 tag 下面的所有标签只会保存最后一个到新的结果数组中
results.push.apply(results, document.getElementsByTagName(tag));
return results;
};
var _each = function(arr, fn){
for (var i = 0; i < arr.length; i++) {
//返回当前对象,定义跳出 for 循环的规则（在数组[1,2,3,4,3]中查找3若不使用break，则会一直查找到最后一个元素才会结束，使用break后，发现满足条件立刻终止循环）
if(fn.call(arr[i], i, arr[i]) === false){
break;
};
//若按照下面的这种写法，在each的方法里中打印 this 会得到 window 对象。
/*
if(fn(i, arr[i]) === false){
break;
};*/
}
};
_each(_gT('div', _gT('p')), function(){
console.log(this);
this.style.backgroundColor = 'red';
});
总结：之前学js一直都是用的jquery库，从来都没有仔细考虑过着里面到底是怎么实现的，现在回过头来学习，发现这里面的代码也是可以千变万化的，受益颇多。
