DOM Level 2 標準技術をMSIEで使う(イベント、基本操作)

はじめに

HTML/XML文書を動的に制馭するするためにはDOMが用いられることが多いわけですが、ことに X(HT)ML を取り扱う上では、どうしても DOM Level 1 の範囲だけでは力不足です。また、イベント制馭は Level 1では定義されていません。
MSIE では、基本的には DOM Level 1 までのサポートに留まっています。それ以外の振舞は独自規格で賄われているのが現状で、このことが、「処理系に依存しない記述」を妨げる原因にもなっています。
Mozilla/Netscape では、 (XHTML文書も含めて)XMLとして認識された文書では、名前空間が重要な役割を果たします。例えば、 XHTML の要素を正しく作成するためには createElementNSが必要になりますが、これは MSIE では認識されません。

具体的な方法

ここでは、 JavaScript(ECMAScript) を用いて、どのようにすればMSIEで標準規格が使えるかを摸索したいと思います。

指針

独自の関数を定義するのではなく、出来るだけ W3C DOM の定義に沿った命名を行う。
標準規格の振舞を完全に再現することは考えず、取り敢えずは、実用に足るべく「基本的な機能が使える」ようにする。

addEventListener() / removeEventListener()メソッド

MSIE には、同様の機能を持つものとして attachEvent() 及び detachEvent()メソッドがありますので、これを活用します。
MSIE では、イベントオブジェクトが windows.event として定義されているので、これを DOM2 の形に直すためには、若干の工夫が必要になります。

if (document.all && document.attachEvent) { // MSIE を判別

// イベントオブジェクトの定義
 function eEvent(e) { this.target=e.srcElement; // 着目要素を定義 
  this.cancelBubble=e.cancelBubble;  // キャンセルの定義
  this.keyVal=event.keyCode // キー操作の定義; Mozilla では通用せず !!!
 }

// addEventListener を attachEvent に結び附ける
function document_addEventListener(ev,func,bl) {
  this.attachEvent("on"+ev, function(){
   var e=new eEvent(event); return func(e);});
}

// removeEventListener を detachEvent に結び附ける
function document_removeEventListener(ev,func,bl) {
  this.detachEvent("on"+ev, func);
}

// document 及び window オブジェクトで **EventListener を使えるようにする
 document.addEventListener=document_addEventListener;
 document.removeEventListener=document_removeEventListener;
 window.addEventListener=document_addEventListener;
 window.removeEventListener=document_removeEventListener;

// (X)HTML文書中のすべての要素で **EventListener を使えるようにする
 var ii=document.getElementsByTagName("*");
 for (var i=0;i<ii.length;i++){
   ii[i].addEventListener=document_addEventListener;
   ii[i].removeEventListener=document_removeEventListener;
 }

}

ここまで出来れば、少なくとも MSIE とMozilla では、(X)HTML 文書に on... 属性を埋め込む必要が無くなります。

createElementNS() メソッド

MSIE では、画面に表示されている (X)HTML/XML に対して document.createElement() メソッドを使って作成した要素は、常に (X)HTML の要素になります。

というわけで、名前空間 http://www.w3.org/1999/xhtml だけを受け附けるようにしてみます。

// createElementNS を定義
 function document_createElementNS(ns,elm) {
  if (document.all && document.attachEvent && ns=="http://www.w3.org/1999/xhtml") {
   return document.createElement(elm);
  }
 }
// createElementNS を使えるようにする
if (document.all && document.attachEvent) {
   document.createElementNS=document_createElementNS;
}

次回は、 XML 読み込みと XPath を用いた要素の取り出し、名前空間の扱いに関して述べたいと思います。

DOM Level 2 標準技術をMSIEで使う(イベント、基本操作)

はじめに

具体的な方法

指針

addEventListener() / removeEventListener()メソッド

createElementNS() メソッド

附加情報