How to Make DHtml -Explorer4-

このページはHTML及び、JavaScriptについて知識があるという前提で書かれています。
Internet Explorer4.0におけるDynamic HTMLの最大の特徴は、 HTMLのオブジェクト化により、全てのHTML要素にアクセス出来るということです。 これは簡単に言うと、全てのタグの操作が可能という事でもあります。
今までは画像や、フォームエレメント等については、JavaScript(VBScript)で操作できましたが、 タグに囲まれた文字を瞬間的に変更したりする事はJavaScript等を使用しても不可能でした。 ところがIE4.0においては、これらが可能になったのです。
つまり、画像など以外のHTML要素でも、 リロードせずに瞬間的に文字の色やフォントを変更したりする事が出来ます。


■HTML要素へのアクセス

IE4.0、HTMLオブジェクトモデルにおいては、各HTML要素(タグなど)に対して、 アクセス及びコントロールが出来ます。下記の例を参照して下さい。


<!-- Sample-No.1 --->
<font id="MyTag" style="color:blue" onMouseover="chgColor()">Dynamic HTML</font>

<SCRIPT Language="JavaScript">
function chgColor() {
    var el;
    el = document.all("MyTag");
    el.style.color = "red";
   }
</script>
上記の例は実行すると、マウスがテキストの上を通過したとき、 テキストの色が赤色になるというものです。
<font id="MyTag" style="color:blue" onMouseover="chgColor()">Dynamic HTML</H1>
idは、タグをコントロールするために必要な識別子です。 スクリプトはこの識別子を指定して、各要素を参照できます。
Dynamic HTMLオブジェクトモデルにおいて、documentオブジェクトのallコレクションは 全てのHTML要素を持っています。各コレクションについては、ID(NAME)で識別されます。 上記の例では、変数elを宣言して、 そのelに"MyTag"というID(NAME)を持ったHTML要素への参照を代入しています。
そしてそのelを使用して、"MyTag"のフォントの色を変更しています(style.colorが持つ)。 ちなみに、elを宣言しなくても、 document.all("MyTag").style.colorと直接指定することももちろん出来ます。


[Sample-No.1の実行例(下の文字に触れて下さい]
Dynamic HTML


■Full Event Model

今までの、HTMLでは一部のタグのみ、一部のイベント(onMouseover,onMouseout,onClick...etc)が利用可能でした(ハイパーリンクタグに、onMouseover,onMouseoutなど)。 しかし、Dynamic HTMLオブジェクトモデルにおいては、サポートされている全てのタグに全てのイベント(Mouse event,Keybord Event,Focus...etc)が利用出来ます。 つまり、<FONT>にonMouseoverなどのイベントを記述できたり、 <SPAN>タグにonKeypressのイベントを記述出来るようになりました。
先程の、Sample-No.1を見てもらうと、<FONT>にonMouseoverの記述があることが分かると思います。 これは、<FONT></FONT>で囲まれたHTML要素にマウスが通過すると、 chgColor()が呼び出されます。


■ページの瞬間的更新

先までの例を見てもらえば、分かると思いますが、Dynamic HTMLでは ページのリロード(更新)を行わなくても、HTML要素の更新が可能です。 瞬間的に、文字の大きさや色を変えたり、HTMLの内容自体を書き変えたりなどが可能です。

■ページの書き換え

すでに決定されてる、ページ上の情報を瞬間的に書き換えるには、 innerHTMLや、outerHTMLなどを使用して行います。


<!-- Sample-No.2 --->
<font id="MyTag2" onClick="chgHTML2()">Dynamic HTML</font>

<SCRIPT Language="JavaScript">
function chgHTML2() {
    MyTag2.innerHTML = "New Title";
   }
</script>
上のスクリプトは、文字列をクリックすると、「Dynamic HTML」の文字を、 「New Title」に書き換えるプログラムです。
ここでは、分かりやすくするためにMyTag.innerHTMLと記述していますが、 先程書いたように、document.all("MyTag").innerHTMLと書いても、もちろん同じ意味です(こちらの方が正式(?))
この、MyTagオブジェクトはinnerHTMLというプロパティを持っています。 JavaScriptで val=MyTag.innerHTML とすると変数valに、"MyTag"の間の情報が代入されます。 (上の例では、変数に"Dynamic HTML"という文字列が入る) 上のサンプルスクリプトでは、そのinnerHTMLに文を挿入することで文を書き換えています。

[Sample-No.2の実行例(下の文字をクリックして下さい]
Dynamic HTML


■StyleSheetへのアクセス、及びコントロール

DHTMLオブジェクトモデルにおいては、スクリプトは 全てのHTML要素にアクセス出来るというのは前記の通りです。 もちろんStyleSheetについても、同じ事が言えます。
各タグのスタイル属性へのアクセスは、タグの持つstyleコレクションを通して行います。
形としては、ID.style.propertyという様になります。


<font id="MyTag3" style="font-size:12pt" onClick="chgHTML3()">Dynamic HTML</font>

<SCRIPT Language="JavaScript">
function chgHTML3() {
    MyTag3.style.fontSize = "20pt";
   }
</script>
上記の例は、文字列をクリックすると、 フォントの大きさを"12pt"から"20pt"に変えるというスクリプトです。
ID"MyTag3"オブジェクトは、styleコレクションを通して、 styleコレクションの持つプロパティでフォントのサイズを設定する"fontSize"にアクセスしています。 そして、そのプロパティに値を代入することにより、自らのStyle属性"font-size"を変更しています。 またIE4.0では、値を代入した瞬間ページのリフレッシュ(reloadではない)が行われ、フォントの大きさが改めて設定されます。 つまり、リアルタイムでフォントの大きさを変更することが可能です。
以下に、Styleコレクションの持つ、プロパティ一覧を載せておきます。
Style Collection Properties
background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundPositionX, backgroundPositionY, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, clip, color, cssText, cursor, display, filter, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pixelHeight, pixelLeft, pixelTop, pixelWidth, posHeight, position, posLeft, posTop, posWidth, styleFloat, textAlign, textDecoration, textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline, textIndent, textTransform, top, verticalAlign, visibility, width, zIndex
なお、これらのプロパティについては、StyleSheetのものとほぼ同じ名前なので、 機能についてはスタイルシートの書籍などでお調べ下さい。


[スクリプトの実行例(下の文字をクリックして下さい]
Dynamic HTML


■アニメーション

IE4.0のDHtmlアニメーションは、スタイルシートのtop,leftの値を操作して実現させます。


to be continued....

[ Back ]


Reference:http://www.microsoft.com/sitebuilder/features/dynamicom.asp