通过类名获取所有改类名的dom节点,并为每个dom设置css样式。
第一种方法:
// 获取 .tr_height 的所有DOM
const treeHei = 66;
let trAllDom = document.getElementsByClassName('tr_height');
// 遍历,设置高度
Array.prototype.forEach.call(trAllDom, function(itemDom){
itemDom.style.height = treeHei + "px";
})
第二种方法:
let trAllDom = document.getElementsByClassName('tr_height');
for(let i = 0; i < trAllDom.length; i++){
trAllDom[i].style.height = treeHei + "px";
}
第三种方法:
// ES5 slice
let trAllDom = document.getElementsByClassName('tr_height');
let arr1 = [].slice.call(trAllDom);
arr1.forEach((itemDom) => {
itemDom.style.height = "100px";
});
ES6:
01、Array.from(array-like-object)
let trAllDom = document.getElementsByClassName('tr_height');
let arr = Array.from(trAllDom);
for(let itemDom of arr){
itemDom.style.height = "100px";
}
02、… 扩展运算符
let trAllDom = document.getElementsByClassName('tr_height');
let realArr = [...trAllDom];
for(let itemDom of realArr){
itemDom.style.height = "200px";
}
03、Iterator遍历器
/*
* 只有部署了Iterator的数据才能用for…of遍历。
* ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。
* 查看是否是“可遍历的”: trAllDom[Symbol.iterator]()
*/
let trAllDom = document.getElementsByClassName('tr_height');
console.log( trAllDom[Symbol.iterator]() ); // Array Iterator {}
for(let item of trAllDom){
console.log(item);
}
// 如果是普通对象,不是类数组或者不可遍历,可利用Object.keys得到对象的键名然后遍历这个数组,假设trAllDom不可遍历
for (let key of Object.keys(trAllDom)) {
console.log(key + ': ' + trAllDom[key]);
}