🐣
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');
// だから配列化してforEachするわけだが...IE11では「fromなにそれ」とか言われてerrorになる。
Array.from(texts).forEach(function (e) {
console.log('forEach - error on IE11:', e.innerHTML);
});
■解決
下記のようにArray.prototype.slice.call()すればOK。
var textsArr = Array.prototype.slice.call(document.getElementsByClassName('text'));
textsArr.forEach(function (e) {
console.log('forEach - correct:', e.innerHTML);
});
// 普通の配列なら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と英語が好き。