JSのgetElementsByClassNameで取得後にhtmlに出力すると[object HTMLCollection]と表示され、文字の出力ができない

Question

宜しくお願い致します。

■やりたいこと
JSのgetElementsByClassNameで要素を取得した後、指定したid名で設定されたタグ内に取得した値を入れたいと考えております。

■できない内容
JSのgetElementsByClassNameで取得後に、取得した要素を他のタグ内にhtmlに出力しようとすると[object HTMLCollection]と表示され、希望している文字の出力がでず、かわりに[object HTMLCollection]という表示がhtml上に表示されてしまいます。

実際に記載したコードは下記となります。

HTML

<div class="get">テスト</div>

<div id="result"></div>

↑ このタグ内に文字列「テスト」を入れたいと考えております。

JS

	const total = document.getElementsByClassName('get');	
	document.getElementById('result').innerHTML = total;

■教えてほしい点
・正しいコード
・object HTMLCollectionは何でどうやって値を取得するのか

Answer 1

document.getElementsByClassName('get')

だと、そのノードのオブジェクトの全部を示すので、1番目のノードのその中のテキストなら、

document.getElementsByClassName('get')[0].textContent

Comments

[bangkok01]

回答を頂きありがとうございます。思ったとおり取得ができました！ありがとうございます。

Answer 2

document.getElementsByClassNameはelement「s」と複数形になっているように、複数個あることが前提となっていて、書いたようなHTMLCollection（DOM要素の配列のようなもの）を返します。

1つだけでテキストを取りたい場合、document.getElementsByClassName('get')[0].textContentのようにして、先頭のテキストを取ってくる必要があります。

Comments

[bangkok01]

詳しいご回答を頂きありがとうございます。思ったとおり取得ができました！ありがとうございます。