html的元素选择,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;

}

}

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