Array.from

###HTMLCollectionで配列系メソッドは使えないらしい

最近JSに触れる機会があるので、備忘録がてら。

const fields = document.getElementsByClassName(
    'elements'
  );

上記のように、getElementsByClassNameで取得できるHTMLCollectionは、配列系のメソッドを利用できないらしい。

そのため、Array fromを使って配列に変換
elements = Array.from(elements)

###サンプル
配列系のメソッド今回の場合はforEachを使った実例。

const fields = document.getElementsByClassName(
    'elements'
  );
Array.from(elements).forEach((element) => {
    const teikies = field.getElementsByClassName(
      '
    );
    Array.from(teikies).forEach((teiki) => {
      link.addEventListener('click', () => {
        const inputs = field.getElementsByTagName('input');
        Array.from(inputs).forEach((input) => {
          const type = input.getAttribute('type');
          const masked = 'icoca';
          const unmasked = 'suica';
          if (type === 'password') {
            input.setAttribute('type', 'text');
            field.classList.remove(icoca);
            field.classList.add(suica);
          } else {
            input.setAttribute('type', 'password');
            field.classList.remove(suica);
            field.classList.add(icoca);
          }
        });
      });
    });
  });