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