原生DOM元素通常使用document下的querySelectorAll、getElementsByClassName等方法获取。
这样的DOM对象被称为NodeList。不能使用数组的方法进行操作,例如forEach()。
NodeList 不是一个数组,是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组,但是可以使用 Array.from() 将其转换为数组。
除了Array.from之外还可以使用下面3种方式转换
- Array.apply(null,contentsDom)
- Array.prototype.slice.call(contentsDom)
- […contentsDom]
代码示例:
let num = 20 let html = '' for (var i = 0; i < num; i++) { html += `<p>${i + 1}</p>` } let contentsDom = document.getElementsByClassName('content') let contentsArr=Arry.from(contentsDom) let contentsArr=Array.apply(null,contentsDom) let contentsArr=Array.prototype.slice.call(contentsDom) let contentsArr = [...contentsDom] contentsArr.forEach(item => { item.innerHTML = html })