空要素のDOMオブジェクトを取得できない

要素取得系メソッドは、ページ読み込み後に実行する

空要素を取得して、JSで動的にコンテンツを出力したいときがあります。

jQueryを使用していないページの場合、要素の取得はgetElement系メソッドに頼るしかないのですが、それが空要素の場合にエラーが発生するときがあります。

たとえばTARGETというIDの空要素を取得するとします。まず、下記のように書くと２行目でエラーが起きます。

var target = document.getElementById('TARGET');
// Cannot set property 'innerHTML' of null というエラーが発生
target.innerHTML = 'hogehoge';

どうやら要素取得系のメソッドは、それが空要素であった場合、ページ読み込み後に実行しないとnullを返すようです（もちろん空でなければ実行のタイミングに関わらず、要素を取得できます）。

スクリプトをbody閉じタグ直前に書くのも対処法ですが、ページの仕様としてそれができない場合はウィンドウ読み込み後に実行すればエラーを回避できます。

念のため変数には空オブジェクトを代入して初期化しておきます。

var target = {};
window.onload = function(){
    target = document.getElementById('TARGET');
    target.innerHTML = 'hogehoge';
}

こうすれば、エラーが発生することなく空要素のプロパティやメソッドを参照することができます。