遍历类数组之获取多个dom节点并遍历

短命女 2022-10-31 14:55 206阅读 0赞

### 第一种方法： ###

// 获取 .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]);
    	}

# 小程序查看面试题更方便  面试题题库 1000+题   （微信搜索  'MST题库'） #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70]: /images/20221024/d0fd75dddf074f5bb6433c9794d93805.png