JavaScript Tips collection - Mozilla's Blues

Mozilla の JavaScript の言語仕様は ECMA Script( ECMA-262 ) で JavaScript1.5 として実装されています。

Mozilla 5 の DOM は W3C DOM Level 1 を実装し、 Level 2 については相当量が実装されているようです。

#> もう少し詳しく見ると、プラスアルファ分( Level 3 ? )も含まれるようです。

それ以外の window や navigator など、 W3C DOM では定義されない部分は独自 ( と言っても NN4 のプロパティを継承していたりしますが ) のオブジェクトやプロパティを追加しています。

但し、現時点では W3C DOM 以外のオブジェクトやメソッド等の実装に関する資料がありませんので、これらを調査するには結構時間がかかります。
ってことで、 Mozilla 5 対応版の Property Viewer を作ってみました。

従来からある images, forms 等の種類別の配列はありますが、それらを除くオブジェクト( レイアなど )は HTML の複雑さに比例したオブジェクト構造をたどらなくても良いように、 document オブジェクトに getElementById ( ID によるオブジェクトのフェッチ )や getElementsByTagName ( タグ名によるオブジェクト配列の取り出し )などのメソッドがあります。

<div class="layer" id="div1">
  <div class="layer" id="div1_1">子レイア１</div>
  <div class="layer" id="div1_2">子レイア２</div>
</div>

div1, div1_1, div1_2のオブジェクトは以下のようにしてアクセスすることができます。

var div1   = document.getElementById('div1');
var div1_1 = document.getElementById('div1_1');
var div1_2 = document.getElementById('div1_2');

var divs = document.getElementsByTagName('DIV');
for(var i=0; i<divs.length; i++){
  var div=divs[i];
    :
}

タグの要素( HTMLElement )に付随する属性値は該当のオブジェクトのプロパティとして実装されていますが、インラインスタイルは style プロパティ ( CSS2Properties )として一つのオブジェクトを形成しています。

これらの属性値の殆どは文字型の値を採り、文字列として参照・設定ができます。

例えば、以下のようなタグが記述されている場合

<IMG name="mzl" src="Mozilla.gif" width=24 height=24
    alt="Mozilla" style="border:1px outset green">

それぞれの属性値は以下のように参照することができます。

var img=document.getElementById('mzl'); // *1
または
var img=document.images['mzl']; // 従来通り

var src=img.src;  または img.getAttribute('src');
    // http://.../Mozilla.gif(string)
var w=img.width;  または img.getAttribute('width');
    // 24(string)
var h=img.height; または img.getAttribute('height');
    // 24(string)
var alt=img.alt;  または img.getAttribute('alt');
    // Mozilla(string)

var border=img.style.border;
    または
var border=img.style.getAttribute('border');
    // 1px outset green(string)

設定は参照と逆動作または setAttribute メソッドで殆どの属性値を変更することができます。

#> オブジェクトの style プロパティは当然インラインスタイル ( タグ中で記述するスタイル )を反映したもので、どちらかと言えば IE の styleプロパティに似ています( 更に言うと IE5 の style プロパティ )。

*1 上の例では、M18以降では正常に動作しません。
これは M18 nightly build の途中で getElementById メソッドが IMGタグの name 属性を対象にしないためです( 現在のところ、バグとも仕様変更とも判断つきません )。
M18 以降でも通用するためには、IMGタグの定義で name 属性と同じ名称を持つ id 属性を定義しておきます。

*2 IMGタグの width,height 属性は M17より特殊な扱いに変わったようです。
つまり、img.width のような記述をすると値は number に、 img.getAttribute('width') のような記述なら string になります。

また、width 属性とスタイルで矛盾する設定をした場合、スタイル指定が優先されて描画されますが、getAttribute で指定した場合は単なる属性の設定値を元に算出されるようです。

その他 img.width で得られる値は属性値で "%" 指定してもピクセル値が設定されるようです。

このような動作は現在の W3C DOM2 では規定されていないため、互換に基づく修正と思われますが、他に同様な動作のプロパティがあるかどうかは実際に調べてみないとわかりません。 :-D

BODYタグ内で任意のオブジェクトを生成するには、従来と同様 document.write[ln] を使用して、必要な HTML を出力すれば生成できます。

然し、 onLoad イベント以降に任意のタイミングでオブジェクトを生成するためには、W3C DOM で定義されているオブジェクトにはクラスがないため、従来の手法とはかなり異なります。

つまり、オブジェクトの生成は new ClassName ではなく、 document オブジェクトにある専用のオブジェクト生成メソッド - createElement や createTextNode - を使用します。

生成したオブジェクトは DOM 上のどこに位置するかを指定して組み込むために、そのオブジェクトが属する上位のオブジェクトに対して appendChild を呼び出すことで管理させます。

例えば、レイア( HTMLDivElement )を BODY 内に追加するためには、以下のような手順を踏みます。

// DIVタグを生成する
var divElement=document.createElement('DIV');
// DIVの属性を設定する
divElement.setAttribute('style',
   'position:absolute;'
  +'left:100; top:100; width:100px; height:100px;'
  +'color:green; background-color:#ffa500;');
// BODYタグに加える
document.body.appendChild(divElement);

レイアに更にテキストとして「Hello World」を追加するためには、次の命令を追加します。

// テキストを生成する
var text=document.createTextNode('Hello World');
// レイアに加える
divElement.appendChild(text);

#> オブジェクトの生成については、この方法以外に Range Model( DOM2 ) を使用すると楽なのですが仕様自体が一部不明のため、ここでは紹介しません。

◆ECMA Script Binding