使用javascript獲取內部HTML元素

Question

我有以下html層次結構：

...
<div class="custom-img-wrapper">
<a target="_blank" class="link-d" href="#"><img class="custom-below-img" src="some source"></a>
<h3><a target="_blank" class="link-d" href="#">some text</a></h3>
</div>

<div class="custom-img-wrapper">
<a target="_blank" class="link-d" href="#"><img class="custom-below-img" src="some source"></a>
<h3><a target="_blank" class="link-d" href="#">some text</a></h3>
</div>
...

我正在檢查與此for鏈接的鏈接：

var x = document.getElementsByClassName("link-d");
for (i = 0; i < x.length; i++) {
    x[i].href = link;
}

現在我的問題是如何保存鏈接內圖像的src ，這樣我將得到如下內容：

var x = document.getElementsByClassName("link-d");
for (i = 0; i < x.length; i++) {
    var link_of_image_inside_node = x[i].????
    x[i].href = link;
}

我知道我可以遍歷custom-below-image但這不是我所需要的，而我正在尋找純JavaScript沒有jQuery解決方案的任何主意？ 謝謝

Answer 1

如果a標簽的第一個子元素是圖像，然后

var link_of_image_inside_node = x[i].firstChild.src;

要么

var link_of_image_inside_node = x[i].children[0].src; //ignores all the text before img tag

其中x[i]是錨元素