Javascriptではまった

Ajax 
<html>
  <head>
    <script language="javascript" type="text/javascript">
      var text = document.getElementById("item1").firstChild.nodeValue;
      alert(text);
    </script>
  </head>
  <body>
    <h1 id="title">タイトル</h1>
    <ul>
      <li id="item1">リスト1</li>
      <li id="item2">リスト2</li>
      <li id="item3">リスト3</li>
      <li id="item4">リスト4</li>
    </ul>
  </body>
</html>

練習のコードで動かない事でちょっと悩んだ。
原因はscriptの位置。

var text = document.getElementById("item1").firstChild.nodeValue;

を実行した時点では、item1が存在しないのでnullになるわけです。
このコードを動かそうと思えば、id="item1"が定義された後でないとエラーになる。