***.forEach is not a function
缘起:
<div id="box">
<p>city</p>
<ul id="city">
<li id="bj">我是第1个孙子</li>
<li>我是第2个孙子</li>
<li>我是第3个孙子</li>
<li>我是第4个孙子</li>
</ul>
</div>
<div id="box_btn">
<button class="button" id="btn1">获取city所有子节点</button>
<button class="button" id="btn2">11</button>
<button class="button" id="btn3">aniu3</button>
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
var city = document.getElementById("city");
var ci2 = city.childNodes;
var ci = city.children;
ci2.forEach(function(a){
alert(a.innerHTML);
});
ci.forEach(function(a){
alert(a.innerHTML);
});
error:
元素子节点.html:60 Uncaught TypeError: ci.forEach is not a function
at HTMLButtonElement.btn1.onclick (元素子节点.html:60)
原生js获取的DOM集合是一个类数组对象,不能直接利用数组的方法
(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!
1.推荐几种转换成数组的方法
1.1 Array.from()
let lis = Array.from(ci);
1.2 […ci]
let lis = [...ci];
1.3 Array.prototype.slice.call(ci)
let lis = Array.prototype.slice.call(ci);