getElementsByTagName

programming web dev
1

I have this example and am trying to get my head around referencing DOM objects.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Untitled Document</title>
</head>
	<body>
	 	<h1>test</h1>   
		<ul id="list">     
			<li><a href="images/temp1.jpg" title="A fireworks display">temp1</a></li>
			<li><a href="images/temp2" title="A cup of black coffee">temp2</a></li>
		</ul>
		<a href="www.temp.com" onclick="showPic(document.getElementById('list').getElementsByTagName('li')[0]); return false;">Click Me</a>
	
	   	<script type="text/javascript"> 
	  	function showPic(pic){
	  		var source = pic.getAttribute("href");
	  		alert(source);
	  	}
	       
	  </script>
	</body>
</html>

Why would the below line of code not reference the href attribute. Right now its showing as null.