divからimg srcを抽出するには？

Question

私は、次のHTMLのdivから画像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> 

は、私は、次のコードを使用してWebサイトから、このdiv要素を抽出しましたsrc。私はgetAttributeの使用を考えましたが、これはnullを返します。 jsメソッドを使ってこれを行う方法はありますか？私の代わりに手動でsrc値のinnerHTMLを解析しています。私は私が知らないより良い解決策があることを願っています。

Answer 1

... querySelector

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

を試してみたり、あなたのコード内で起こる何

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

Answer 2

はあなたがいないsrc属性を持つ要素var cart_image0 = document.getElementsByClassName("mini-cart-image")[0]を選択していることであるセレクタからもaを削除

それはあなたが電話するときnullになる理由です。cart_image0.getAttribute('src')

であなたが cart内のすべての画像のコレクションを取得します。..だからあなたはコードのように、非常に最初の imgの要素を反復処理するか、使用することができます

コード

// 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')[0]となります。

Answer 3

あなたの問題は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 

---