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

<p>The output of the code can be found at <a href="http://jsfiddle.net/Bdbtq/" rel="nofollow">http://jsfiddle.net/Bdbtq/</a></p>

<p><strong>Code</strong></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
    &lt;meta http-equiv="content-language" content="en-us" /&gt;
    &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
    &lt;meta http-equiv="pragma" content="no-cache" /&gt;
    &lt;meta name="keywords" content="" /&gt;
    &lt;meta name="description" content="" /&gt;
    &lt;meta name="author" content="" /&gt;
    &lt;meta name="copyright" content="&amp;copy; 2012" /&gt;
    &lt;meta name="robot" content="noindex, nofollow" /&gt;

    &lt;title&gt;js features&lt;/title&gt;

    &lt;base href="" /&gt;

    &lt;link rel="stylesheet" type="text/css" media="all" href="" /&gt;

    &lt;style type="text/css" media="all"&gt;

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="container"&gt;
        &lt;div id="header"&gt;&lt;/div&gt;
        &lt;div id="content"&gt;
            &lt;p&gt;This is sample content&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="footer"&gt;&amp;copy; 2012&lt;/div&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;

    function hideMe() {
        //hide all div elements
        var div = document.getElementsByTagName("div");

        for(var i = 0; i &lt; div.length; i = i + 1) {
            div.style.display="none";
        }
    }

    &lt;/script&gt;
    &lt;p onClick="hideMe();"&gt;Click to hide&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
