获取使用JavaScript（不是jQuery的）图像的替代文本和源属性

Question

我有以下标记：

<h1 id="logoImage"> 
    <a href="/"> 
     <img src="http://path-to-image.jpg" alt="Title of site" /> 
    </a> 
</h1> 

我想获得“SRC”和“ALT”的价值观，并利用它们以一种不同的方式，除去页面中的图像元素。

<h1 id="logoImage"> 
    <a href="/" style="background-image: url('http://path-to-image.jpg')"> 
     Title of Site 
    </a> 
</h1> 

我对普通ol的JavaScript不太熟悉，所以这让我非常难过。

有关如何解决这个问题的想法？

Answer 1

window.addEventListener('load', function load(){ 
    var logo = document.getElementById('logoImage'), 
     img, 
     parent; 

    if (!logo) { 
     return; 
    } 

    img = logo.querySelector('img'); 

    if (!img) { 
     return; 
    } 

    parent = img.parentNode; 

    parent.style.backgroundImage = 'url(' + img.src + ')'; 
    parent.style.display = 'block'; 
    parent.style.width = img.width + 'px'; 
    parent.style.height = img.height + 'px'; 
    parent.textContent = img.alt; 
}); 

http://jsfiddle.net/q7brkkbt/1