🐣 IE11でforEach()出来ない件
作成日: 2021/12/06
4

■事象

IE11でNodeListのforEach()が出来ない。

<div class="text">text01</div>
<div class="text">text02</div>
<div class="text">text03</div>
<div class="text">text04</div>
<div class="text">text05</div>
// 一見配列っぽいけど配列じゃない。
var texts = document.getElementsByClassName('text');

t01.png

// だから配列化してforEachするわけだが...IE11では「fromなにそれ」とか言われてerrorになる。
Array.from(texts).forEach(function (e) {
  console.log('forEach - error on IE11:', e.innerHTML);
});

t03.png

■解決

下記のようにArray.prototype.slice.call()すればOK。

var textsArr = Array.prototype.slice.call(document.getElementsByClassName('text'));
textsArr.forEach(function (e) {
  console.log('forEach - correct:', e.innerHTML);
});

t02.png
t04.png

// 普通の配列ならIE11でも問題なくforEach()出来るんですけどね。
var itemsArr = ['item01', 'item02', 'item03', 'item04', 'item05']
itemsArr.forEach(function (e) {
  console.log('forEach', e);
});

// ちなみにjQueryだとこういう書き方になる。IE11対応。
$('.text').each(function (i, e) {
  console.log('jQuery:', $(e).html());
});

jQueryに頼っていると気がつかないJavaScript事情でした。脱jQueryでいこう。

最近Edgeに強制移行するようになったしサポート終了が目前に迫ったことだし、IE11、早く対象ブラウザから消えてほしい(切実)。


JavaScriptとSassと英語が好き。