技術標籤：javascriptjsjavascriptdom

***.forEach is not a function

• 緣起：
• • 在這裡插入圖片描述 ==原生js獲取的DOM集合是一個類陣列物件，不能直接利用陣列的方法 （例如：forEach，map等），需要進行轉換為陣列後，才能用陣列的方法！==
• 1.推薦幾種轉換成陣列的方法
• • 1.1 Array.from()
  • 1.2 [...ci]
  • 1.3 Array.prototype.slice.call（ci）

緣起：

	<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）;