getElementsByClassNameで画像を表示できない

Question

現在表示されている画像の情報を読み込んで、違う場所に表示させたいのですが
表示されず悩んでいます。

class="swiper" 内の画像(cloud.png)を
id="over_bgimg" へ表示させようとしています。

id="get_bgimg"のついた画像が他のdivに囲まれた要素にも存在しているので、このclass="swiper"div内のid="get_bgimg"の画像のみを読み込みたいです。

<div class="swiper">
<div class="swiper_box">
<img id="get_bgimg" src="cloud.png" />
</div>
</div>

<div id="over_bgimg">
</div>

	var getimg = document.getElementsByClassName('swiper');
	var img = getimg.getElementById('get_bgimg');
        var imgsrc = img.src;
        var out =  imgsrc ;
        document.getElementById('over_bgimg').innerHTML = "<img src='" + out + "'";

どうぞご教授よろしくお願いいたします。

Answer 1

getElementByIdはgetElementsByClassNameの返すHTMLCollectionには存在しません。
また、getElementsByClassNameは複数要素を取得するため、特定のElementを操作するには（たとえば）下記のようにする必要があります。

var getimg = document.getElementsByClassName('swiper');
//               ↓ swiperクラスを持つ先頭の要素を指定
var img = getimg[0].querySelector('#get_bgimg');
//                       ↑ querySelectorなら使える
var imgsrc = img.src;
var out =  imgsrc ;
//                                             タグが閉じられていませんでした ↓
document.getElementById('over_bgimg').innerHTML = "<img src='" + out + "'>";
```**動くサンプル：**[https://jsfiddle.net/g4j10cf9/](https://jsfiddle.net/g4j10cf9/)

---

【Document.getElementsByClassName() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName)

【Document.querySelector() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

Comments

[cassis]

すごく丁寧に教えてくださってありがとうございました。
参考アドレスも初心者にも分かりやすくて、とても助かりました。