配列をトラバースして複数のDOMノードを取得し、トラバースします

最初の方法:

	// 获取 .tr_height 的所有DOM
	const treeHei = 66;
	let trAllDom = document.getElementsByClassName('tr_height');
	// 遍历,设置高度
	Array.prototype.forEach.call(trAllDom, function(itemDom){
		itemDom.style.height = treeHei + "px";
	})

2番目の方法:

	let trAllDom = document.getElementsByClassName('tr_height');
	for(let i = 0; i < trAllDom.length; i++){
		trAllDom[i].style.height = treeHei + "px";
	}

3番目の方法:

	// 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的数据才能用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以上の質問(WeChatで「MST質問バンク」を検索)

 

おすすめ

転載: blog.csdn.net/weixin_42981560/article/details/113975917