for in 和 for，以及getElementsByTagName('*')

因爲原生js中，沒有能經過class獲取元素的方法，OK，來，本身寫

function getElementByClassName(clsName, parent) {
	var children = (parent || document.body).getElementsByTagName('*');
	var result = [];
	for(var i in children) {
		var classes = children[i].className;
		if(classes && classes.indexOf(clsName) > -1) {
			result.push(children[i])
		}
	}
	return result;
}

正在我沾沾自喜的時候，尼瑪，出幺蛾子了

頁面結構是這樣的

<div id="wrap">
   <div id="block1" class="block"></div>
   <div id="block2" class="block"></div>
   <div id="block3" class="block"></div>
   <div id="block4" class="block"></div>
</div>

我了個擦，返回了一個8個元素的數組，有木有，好難過，這不是我想要的結果。擦乾眼淚，找出問題的地方吧。看下控制檯，發現這個8元素數組，該有的四個元素每一個都重複了一下。我了個擦擦擦，這是爲何。在找到問題以前，我決定，先換成for循環，畢竟要先把任務完成不是。

function getElementByClassName(clsName, parent) {
   var children = (parent || document.body).getElementsByTagName('*');
   var result = [];
   for (var i = 0; i < children.length; i++) {
       var classes = children[i].className;
       if (classes && classes.indexOf(clsName) > -1) {
           result.push(children[i])
       }
   }
   return result;
}

bug解決了，返回的數組中有四個元素，就是我須要的那四個元素。

我擦，這是爲何，果斷求助淼哥。從淼哥那裏，我獲得一個重要的信息，getElementsByTagName('*')返回的不是數組，而是一個類數組，雖然有length屬性，可是，並非真正的數組。OK，事到現在，真想大白。因爲getElementsByTagName，這玩意，返回的不是一個真正的數組，因此，在用for in遍歷的時候，會遍歷全部的key-value，而用for遍歷的時候，就不會這樣，只去遍歷children[0]，children[1]，children[2]...children[length-1]

 

 

正當我覺得事情解決的時候，忽然想到一個問題，爲何，對於for in遍歷，返回的數組中會有兩個相同的元素？難道children中自己就有兩個同樣的元素？

果不其然，當我在控制檯打印children時，果真發現了相同的元素

果真，有相同的元素，並且，詭異的是

length竟然仍是5！！！

length竟然仍是5！！！

length竟然仍是5！！！

接着試驗，當我把div的id去掉以後

<div id="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

children中的相同的元素就沒有了！！！

沒有了！！！

沒有了！！！

沒有了！！！

這是爲何？

繼續試驗

給每一個div加name屬性

若是幾個div的name同樣的話，只有第一個div會重複一次，其餘的div不會重複

若是div的name都不同，每個元素會重複一次

id和name都存在的狀況下，若是name都不同，每一個元素會重複兩次！

id和name都存在的狀況下，若是name都不同，每一個元素會重複兩次！

id和name都存在的狀況下，若是name都不同，每一個元素會重複兩次！

除了id和name，其餘的屬性，都不會形成重複現象。

這不由讓我想起了，js的原生獲取dom的三個方法，getElementById，getElementsByTagName，getElementsByName。

我猜想是，getElementsByTagName這個方法，當參數爲 * 時，又去調用了另外兩個方法，這個純屬猜想，目前我在谷歌和百度都還沒搜到答案。等搜索到答案後，再來這裏更新，也但願某位大神，能不吝賜教。

總之先牢記這個坑，用getElementsByTagName('*')獲取出來的元素，遍歷的時候，不要用for 

感謝淼哥