***.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;
			//手贱：用了forEach()
			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）;