Why do I get the error Uncaught TypeError: Cannot set property 'display' of undefined in Javascript?
===

I am attempting the understand the use of the `document` object type and to challenge myself I am trying to hide all the `div` tags. When I execute the function, I am returned the error `Uncaught TypeError: Cannot set property 'display' of undefined` however am unsure what it means exactly. What is undefined?

The output of the code can be found at http://jsfiddle.net/Bdbtq/

**Code**

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="content-language" content="en-us" />
    	<meta http-equiv="cache-control" content="no-cache" />
    	<meta http-equiv="pragma" content="no-cache" />
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />
    	<meta name="author" content="" />
    	<meta name="copyright" content="&copy; 2012" />
    	<meta name="robot" content="noindex, nofollow" />
    	
    	<title>js features</title>
    	
    	<base href="" />
    	
    	<link rel="stylesheet" type="text/css" media="all" href="" />
    	
    	<style type="text/css" media="all">
    	
    	</style>
    </head>
    <body>
    	<div id="container">
    		<div id="header"></div>
    		<div id="content">
    			<p>This is sample content</p>
    		</div>
    		<div id="footer">&copy; 2012</div>
    	</div>
    	
    	<script type="text/javascript">
    	
    	function hideMe() {
    		//hide all div elements
    		var div = document.getElementsByTagName("div");
    		
    		for(var i = 0; i < div.length; i = i + 1) {
    			div.style.display="none";
    		}
    	}
    	
    	</script>
    	<p onClick="hideMe();">Click to hide</p>
    </body>
    </html>