如何从div中提取img src？

我想从下面的HTML DIV提取图像源：如何从div中提取img src？

var cart_image0 = document.getElementsByClassName("mini-cart-image")[0] 
var cart_image0src = cart_image0.getAttribute('src') // null

我想返回的值：

<div class="mini-cart-image"> 
    <a href="http://marmot.com/equipment-tents-6-person-tents/midpines-6p/889169900013.html"> 
    <img src="http://s7d2.scene7.com/is/image/marmot/29510_9821_f?$thumb$" alt="Midpines 6P, Orange Spice/Arona, small" title="Midpines 6P, Orange Spice/Arona"/> 
    </a> 
</div>

我用下面的代码中提取从网站这个div src。我想过使用getAttribute，但是这返回null。有没有办法使用js方法做到这一点？我的替代方法是手动解析src值的innerHTML。我希望有一个我不知道的更好的解决方案。

来源

2017-04-19 Josh Pann

'getElementsByClassName方法（ “微型车像”）'返回股利。不是图像。 – evolutionxbox

尝试querySelector

var cart_image0 = document.querySelector(".mini-cart-image a img").getAttribute('src');

或选择

var cart_image0 = document.querySelector(".mini-cart-image img").getAttribute('src');

来源

2017-04-19 14:13:30 gurvinder372

你可以删除选择器中的'a'？ – evolutionxbox

这工作。谢谢。我将阅读querySelectors。你可以删除一个和返回是一样的。 –

在你的代码发生什么事是，你是没有src属性选择一个元素var cart_image0 = document.getElementsByClassName("mini-cart-image")[0]删除a也..

这就是您拨打cart_image0.getAttribute('src')时收到零的原因

代码

// Select the cart 
 
var cart = document.getElementsByClassName("mini-cart-image")[0]; 
 

 
// Select the img in the cart 
 
var img = cart.getElementsByTagName('img')[0]; 
 

 
// Get the img src attribute with "img.getAttribute('src')" or shorter "img.src" 
 
console.log(img.src);

<div class="mini-cart-image"> 
 
    <a href="http://marmot.com/equipment-tents-6-person-tents/midpines-6p/889169900013.html"> 
 
    <img src="http://s7d2.scene7.com/is/image/marmot/29510_9821_f?$thumb$" alt="Midpines 6P, Orange Spice/Arona, small" title="Midpines 6P, Orange Spice/Arona"/> 
 
    </a> 
 
</div>

注意与cart.getElementsByTagName('img')你得到一个集合与在cart所有图像..所以你可以遍历或使用第一个img元素，如代码例如，使用cart.getElementsByTagName('img')[0]。

来源

2017-04-19 14:17:08

您的问题是var cart_image0 = document.getElementsByClassName("mini-cart-image")[0]未引用img元素。

试试这个：

var cart_wrapper = document.getElementsByClassName("mini-cart-image")[0]; 
var cart_image0 = cart_wrapper.getElementsByTagName("img")[0] 
var cart_image0src = cart_image0.getAttribute('src') // no longer null

来源

2017-04-19 14:22:19

如何从div中提取img src？

回答

相关问题