使用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]是锚元素