今天在写一个JavaScript的demo----选项卡时遇到了一些问题，现记录如下：
（1）首先我发现在想定位到页面中的类是、时，我自然而然地想到了document.getElementsClassName(‘box‘);
但是我发现编辑器的高亮并没有显示，不像是document.getElementById的高亮，然后百度了一下，发现这种用法并没有提供支持，因为IE不支持
（2）在写一个for循环的时候，并没有像我设想的那样：
for(var i=0;i<li.length;i++){
li[i].onmouseover = function(){
for(var j=0;j<li.length;j++){
li[j].className = ‘link‘;
box[j].style.display = ‘none‘;
}
box[i].style.display = ‘block‘;
this.className = ‘active‘;
};
}
如上，我希望想c++或者其他的语言那样，通过定义定义两层for循环来定义新的box，结果编译并没有通过
为了探求原因，我把外层for循环写成如下：
for(var i=0;i<li.length;i++){
alert(i);
}
这样确实是从0,1,2,3这样的顺序打印的，说明for循环确实是这样执行的，但是以如下的方式进行执行的话：
for(var i=0;i<li.length;i++){
li[i].index = i; //需要对li定义一个index属性，否则无法将每一个index付给后面的box
li[i].onmouseover = function(){
for(var j=0;j<li.length;j++){
li[j].className = ‘link‘;
box[j].style.display = ‘none‘;
}
alert(i);
};
}
像这样进行打印之后，发现打印出来的i都是li.length。之后才发现这个alert(i)是放在onmouseover事件里面的，并不是直接执行的
所以在执行onmouseover时，外层循环已经执行完了，当然每次打印出来的i值就是最终的i值
所以为了避免这样的错误，应该改成如下这样：
for(var i=0;i<li.length;i++){
li[i].index = i; //需要对li定义一个index属性，否则无法将每一个index付给后面的box
li[i].onmouseover = function(){
for(var j=0;j<li.length;j++){
li[j].className = ‘link‘;
box[j].style.display = ‘none‘;
}
box[this.index].style.display = ‘block‘;
this.className = ‘active‘;
};
}
看来好多细节还是要注意啊