JavaScript xxx.getElementsByTagName is not a functionの解決方法

2023年7月30日

環境
Google Chrome　 114.0.5735.199（Official Build） （64 ビット）
Windows 11 Pro 64bit

修正前コード

<div class="yy"><p>study</p><p>bbb</p></div>
<div class="yy"><p>skill</p></div>
<div class="yy"><p>d2222</p><p>eee</p></div>


<button onclick="funA()">テスト</button>

<script>
function funA() {
const elems = document.getElementsByClassName('yy');

console.log(elems);
// HTMLCollection(3) [div.box, div.box, div.box]

const result = elems.getElementsByTagName('p');

console.log(result);
}
</script>

エラーメッセージ
Uncaught TypeError: elems.getElementsByTagName is not a function

対策
HTMLCollection要素を指定して実行する場合、インデックス番号を指定してDOM要素を取得します。

修正後コード

<div class="yy"><p>study</p><p>bbb</p></div>
<div class="yy"><p>skill</p></div>
<div class="yy"><p>d2222</p><p>eee</p></div>


<button onclick="funA()">テスト</button>

<script>
function funA() {
const elems = document.getElementsByClassName('yy');

console.log(elems);
// HTMLCollection(3) [div.box, div.box, div.box]

const result = elems[0].getElementsByTagName('p');

console.log(result);
}
</script>