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

環境
Google Chrome  114.0.5735.199(Official Build) (64 ビット)
Windows 11 Pro 64bit

修正前コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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要素を取得します。

修正後コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

 

JavaScript

Posted by arkgame