document.write とinnerHTMLの違い

サンプルは、サイトのリファラをdocument.referrer から取得するスクリプトです。

if (document.referrer.indexOf("http://www.google.co.jp/search?") == 0 {
  var args = document.referrer.substring(ref.indexOf("?")+1).split("&");
  for (var i = 0; i < args.length; i++) {
    if (args[i].substring(0,2) == "q=" ) {
      document.write("<p>Google検索からようこそ!");
      document.write("検索キーワードは:" + 
                 unescape(args[i].substring(2)).replace('+', ' ');
    break;
    }
  }
}

15.10.2

JavaScript の document.write メソッドを使って現在のドキュメントに HTML を出力できるのは、ドキュメントの解析中の間なので注意してください。<scirpt>要素の中のトップレベルのコードから document.write() が呼び出せるのは、このスクリプトがドキュメントの解析の一部として実行されるからです。関数中で document.write() を呼び出すように定義し、イベントハンドラからこの関数を呼び出した場合、予想外の動作をします。このようなメソッドの呼び出しでは、現在のドキュメントが消去され、このドキュメントに含まれていたスクリプト自体も消去されます。~(中略)~ document.write() メソッドは、最近のコードではあまり使われていません。innerHTMLプロパティなどの DOM 機能のほうが、ドキュメントにコンテンツを追加するには便利だからです。

15.5.1

Element の  innerHTML プロパティを読みだせば、マークアップを含んだ文字列形式で、要素のコンテンツが返されます。要素の innerHTML プロパティ に値を設定すると、 Web ブラウザのパーサーが呼び出され、要素の現在のコンテンツは、新たに設定した文字列に対応する表現で上書きされます。名前は、 innerHTML ですが、 innerHTML は HTML 要素だけでなく XML 要素も使えます。
Web ブラウザは、HTML の解釈が得意です。このため、 innerHTML に対して解釈が必要となる値を指定したとしても、かなり効率的に処理されれるのが普通です。ただし、+= 演算子を使って、テキストを少しずつ何度も innerHTML に追加していくことはあまり効率的ではありません。シリアライズ処理と解釈処理を何度も行うことになるからです。

document.write()メソッドも.innerHTMLプロパティも一長一短がありますが、innerHTML の方が融通が利いて危険性も少ないということでしょうか。最新のブラウザではすべて実装されていているそうです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です