<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></head>
<body>
<div>1</div>
<div>2</div>
<p>3</p>
<p>4</p>
</body>
</html>
上面是一個(gè)簡(jiǎn)單的html頁(yè)面碘耳，現(xiàn)在我們要用原生的javascript來操作
- 1.獲取所有div显设，并改變所有div的背景
- 2.獲取所有p標(biāo)簽，并改變p標(biāo)簽的背景
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';
}
這樣寫可以達(dá)到滿足要求辛辨，但是代碼冗余捕捂，所以我們要進(jìn)行方法的封裝。（首先封裝獲取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個(gè)for循環(huán)指攒，是否可以把for循環(huán)也封裝起來。
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');
封裝完成僻焚，但是還有問題允悦，那如果我不想改變背景顏色了，我要改成背景圖片虑啤，這個(gè)時(shí)候怎么寫呢隙弛？（繼續(xù)在 _each 的方法里加架馋？當(dāng)然不行！）
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';
});
這樣就結(jié)束了嗎驶鹉，當(dāng)然沒有绩蜻，上面的代碼中，獲取dom的方法和循環(huán)的each方法我們都調(diào)用了2次室埋，還可以繼續(xù)優(yōu)化？（很明顯是可以的伊约。）隱式迭代
var _gT = function(tag, results){
results = results || [];
//將獲取的每一個(gè)元素保存到新數(shù)組中姚淆，若不使用 apply 則一個(gè) tag 下面的所有標(biāo)簽只會(huì)保存最后一個(gè)到新的結(jié)果數(shù)組中
results.push.apply(results, document.getElementsByTagName(tag));
return results;
};
var _each = function(arr, fn){
for (var i = 0; i < arr.length; i++) {
//返回當(dāng)前對(duì)象,定義跳出 for 循環(huán)的規(guī)則（在數(shù)組[1,2,3,4,3]中查找3若不使用break，則會(huì)一直查找到最后一個(gè)元素才會(huì)結(jié)束屡律，使用break后腌逢，發(fā)現(xiàn)滿足條件立刻終止循環(huán)）
if(fn.call(arr[i], i, arr[i]) === false){
break;
};
//若按照下面的這種寫法，在each的方法里中打印 this 會(huì)得到 window 對(duì)象超埋。
/*
if(fn(i, arr[i]) === false){
break;
};*/
}
};
_each(_gT('div', _gT('p')), function(){
console.log(this);
this.style.backgroundColor = 'red';
});
總結(jié)：之前學(xué)js一直都是用的jquery庫(kù)搏讶，從來都沒有仔細(xì)考慮過著里面到底是怎么實(shí)現(xiàn)的，現(xiàn)在回過頭來學(xué)習(xí)霍殴，發(fā)現(xiàn)這里面的代碼也是可以千變?nèi)f化的媒惕，受益頗多。
