JS操作html元素3种选中元素的方式

web.jpeg

几种元素的选中方式

Untitled.gif image.png

方式一 双重for循环

var oul = document.getElementById("oul");
var list = oul.children;

for(var i = 0; i < list.length; i ++){
    list[i].onmouseover = function(){
        
        for(var j = 0 ; j < list.length; j ++){
        list[j].className = "";
     }
    this.className = "current";
    }
}

这种方式适用于 少量的元素标签，如果过多稍微会影响性能

方式二 给对象添加属性或者 自定义属性

var oul = document.getElementById("oul");
var list = oul.children;
var lastIndex = 0;

for(var i = 0; i < list.length; i ++){
    // 给这个对象 添加属性index属性
    list[i].index = i;
    list[i].onmouseover = function(){
    
        list[lastIndex].className = "";

        this.className = "current";
      //更新
        lastIndex = this.index;
    }

}

方式三 操作元素

var oul = document.getElementById("oul");
var list = oul.children;
var selectObjc = list[0];
for(var i = 0; i < list.length; i++){
   list[i].onmouseover = function(){
        //清空原来的
        selectObjc.className = "";
        //选择现在的
        this.className = "current";
        //把现在的 赋值给原来的 更新
        selectObjc = this;
   }
}

不管哪种方式:其主要原理都是，清空之前的选中的，选中当前的元素