問題のコード
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>
<p id="one">1</p>
<p id="two">2</p>
<p id="three">3</p>
<div id="hoge"></div>
</body>
<script>
let pElements = document.getElementsByTagName("p");
let value = pElements.item("two").innerText;
document.getElementById("hoge").innerText = value;
</script>
</html>
pタグの内、「id=two」の要素のテキストを取得し、「id=hoge」の要素に追加するコード。
MDNを参照するとHTMLCollection.item()の引数には、indexを指定しなければならず、上記コードは期待通りの動作をしないはず。
MDN Web Docs : HTMLCollection
Chromeでの表示
1
2
3
1
Chromeでは想定通り「id=two」の要素が取得できていない。
IEでの表示
1
2
3
2
IEでは「id=two」の要素が取得できている。
まとめ
IEでは引数に文字列を渡した場合、HTMLCollection.namedItem()と同じ挙動をする模様。
IEと他ブラウザで同じ挙動をさせたい場合は、.namedItem()か.getElementBy○○()を使用するのが良さそう。
妙にハマったので備忘録として残しておく。