代码如下:
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<script>
//获取到元素
var lis = document.getElementsByTagName('li')
//遍历
lis.forEach(function (value, index) {
console.log(value);
})
</script>
</body>
对DOM元素进行forEach循环操作时,伪数组遍历会报错:'elem.newList is not a function',为了避免这个问题,需要进行转换。
这里涉及到了伪数组转为真数组
(1) ES5 转为真数组
Array.prototype.slice.call(元素对象)
let elem1 = Array.prototype.slice.call(elem)
(2) ES6 转为真数组
Array.from(元素对象)
let elem2 = Array.from(elem)
正确操作代码
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.querySelectorAll('li')
// 这里用forEach遍历 需要把伪数组转为真数组
// es5语法
// let newList = Array.prototype.slice.call(lis)
// es6语法
let newList = Array.from(lis)
newList.forEach(function (value, index) {
console.log(value);
})
</script>
</body>
在这里插入图片描述
网友评论