How to get an attribute from a hierarchy? (read)

I've got the following code (example):

<body>
 <div id="obj1">
  <span id="obj2">
   <img src="someimage2.jpg" class="image" />
  </span>
  <img src="someimage2.jpg" class="image" />
 </div>
 <img src="someimage3.jpg" class="image" />
 <button onClick="getUrl();">Get it?</button>
</body>

I need JavaScript to get the url of the image which is located at body >> obj1 >> obj2 >> img

I can imagine a markup similar to this...

function getUrl() {
   alert(document.getElementById("obj1").getElementById("obj2").img.getAttribute("src"));
}

But (what a surprise!) it doesn't work, apparently.

Any help? :)

What I am trying to do (if this helps):

I've got an input and a button. Say I type this into input:

Cyber Dragon

This code is called upon the button is pressed:

'do something' or here: document.write('<input id="src" /><button onClick="getImg();">Get</button><br /><iframe src="http://yugioh.wikia.com/wiki/' + document.getElementById("src").value.replace(" ","_") + '"></iframe>');

Then, I'd need to get the image's src attribute from the site (which is "http://yugioh.wikia.com/wiki/Cyber_Dragon" in this case), but it's not all that simple.

The site stores it in an img, not an ID's Div, and can only be told from other images by its hierarchy position. Also, the img's src is complicated and not universal. For example, one's adress would be

http://images3.wikia.nocookie.net/__cb20060929013607/yugioh/images/thumb/e/e5/CyberDragonCRV-EN-SR.jpg/300px-CyberDragonCRV-EN-SR.jpg

and another would look like

http://images1.wikia.nocookie.net/__cb20090402012158/yugioh/images/thumb/a/a6/HonestLODT-EN-ScR-1E.png/300px-HonestLODT-EN-ScR-1E.png

Solution

Since you can only have one element in any document with any given id, you only need the one getElementById. You can then use getElementsByTagName to find the image and then the src property to find the image's source:

var imgsrc = document.getElementById('obj2').getElementsByTagName('img')[0].src;