---
tags: Javascript,
disqus: hackmd
---

# [JS]HTMLCollection使用Array方法|chris_Hsiao

為什麼不直接使用dd接forEach就好，還要用Array.prototype?
答：getElementsByClassName返回的是一個collection，並非array。

藉由此題暸解到，HTML collection，也可以直接跑array的方式，
不用再特地轉array或使用for loop。

var dd = document.getElementsByClassName('item');

Array.prototype.forEach.call(dd, function(element) {
  element.addEventListener('click', function() {
    console.log('element', element);
  });
});

ES2015 (aka ES6)

const dd = document.getElementsByClassName('item');

Array.from(dd).forEach(element => {
  element.addEventListener('click', () => {
    console.log('element', element);
  });
});

#### 參考文章
[Click on multiple elements same class name](https://stackoverflow.com/questions/54508019/click-on-multiple-elements-same-class-name)

---

### 轉array

或者可以使用slice

[Most efficient way to convert an HTMLCollection to an Array](https://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array)

Array.prototype.slice.call跟[].slice.call，
雖然效果一樣，但還是有一點不一樣，可以再上網查一下有什麼差別。

var arr = Array.prototype.slice.call( htmlCollection );

var arr = [].slice.call(htmlCollection);

ES6

var arr = Array.from(htmlCollection); //ie不支援
var arr = [...htmlCollection]; //ie不支援

---

### for loop

var dd = document.getElementsByClassName('item');

for (var i = 0, i < dd.length; i++) {
    dd[i].addEventListener('click', function() {
    console.log('element', element);
  });
};