エレメントとコレクションにおけるスクリプト記述

[アーティクル]
03/19/2008


		前のトピック: ウィンドウ、フレーム、ダイアログボックスにおける機能次のトピック: イベントモデルの理解

エレメントとコレクションにおけるスクリプト記述

各HTMLドキュメントは、HTMLタグとその属性の組み合わせからなる。これらのエレメントはドキュメントの構造を定義し、コンテントの表示方法を決定する。Dynamic HTMLオブジェクトモデルを使うと、これらのエレメントとその属性を調べ修正できる。以下のトピックでは、エレメントコレクションを使ってドキュメントのエレメントにアクセスする方法を説明する。

allコレクションとchildrenコレクション

その他のコレクション

コレクションの利用

新しいコレクションの作成: tagsメソッド

エレメントプロパティへのアクセス

エレメント階層を調べる

エレメントの位置と大きさの取得

表示されるようにエレメントをスクロールさせる

allコレクションとchildrenコレクション

HTMLドキュメントは、ドキュメントの内容を定義するタグが階層的に構築されたものである。ドキュメントオブジェクトのallコレクションは、ドキュメント階層のエレメントすべてを示す。各エレメントは、コレクション中のプログラム可能なオブジェクトとしてソース中の順番で現れる。個々のエレメントオブジェクトへは、インデックスか識別子（それぞれの名前）でアクセスできる。次の例で、この方法について説明する。
<HTML>
<HEAD><TITLE>Elements: Collecting</TITLE>
<SCRIPT LANGUAGE="JScript">
function showElements() {
var tag_names = "";
for (i=0; i<document.all.length; i++)
tag_names = tag_names + document.all(i).tagName + " ";
alert("This document contains: " + tag_names);
}
</SCRIPT>
</HEAD>
<BODY onload="showElements()">
<H1>Welcome!</H1>
<P>This document is <B>very</B> short.
</BODY>
</HTML>
このドキュメントがロードされると、スクリプト（onloadイベントのイベントハンドラ）はallコレクションを順に調べることで、ドキュメントにおけるエレメントのリストを表示する。この例では、次のようなメッセージを表示する。
This document contains: HTML HEAD TITLE SCRIPT BODY H1 P B
ドキュメントの各HTMLエレメントが見える。このリストには、エレメントの終了タグが表示されていないことに注意する。これは、各エレメントオブジェクトが、開始タグと終了タグの両方を意味するからである。また、エレメントの階層も表示しない。つまり、このエレメントが他のどれを含むかは分からないのである。コレクションは、ドキュメントのHTMLソースに表示する順番でエレメントをリストする。

いろいろな点で、allコレクションは配列と似ている。allコレクションには、同じ型（この場合、エレメントオブジェクト）ごとに1つ以上の項目を含む。0から始まるインデックス値、または、名前や識別子を使うとその項目にアクセスできる。最初の項目はインデックス値が0となり、2番目は1となる。lengthプロパティを使うと、コレクションの項目数を決定できる。

allコレクションの各項目はエレメントオブジェクトなので、プロパティとメソッドをこれらの項目に適用できる。例えば、tagNameプロパティを使うと、前の例のようにエレメントのHTMLタグの名前を検索できる。同様に、document.allコレクションからエレメントのHTMLタグの名前にアクセスすると、各エレメントのプロパティとメソッドにアクセスできる。

allコレクションは常にドキュメントの現在の状況を示し、ドキュメントで行ったあらゆる変更を反映するために自動的に更新される。例えば、コレクションを読み出してドキュメントのコンテントを追加したり削除してHTMLの構造が変わった場合、コレクションは新しいHTMLコンテントのソースの順番を自動的に反映する。

このような場合、allコレクションには実際にドキュメントのファイルにある以上のエレメントを含む場合がある。特に、ソースに記述されていなくても、コレクションには常にHTML、HEAD、TITLE、BODYエレメントがある。同様に、コレクションは、HTMLソースでTBODYが指定されたかどうかに関わらず、常に各TABLEに対するTBODYエレメントを含む。

また、allコレクションにはコメント、不明のタグ、無効なタグも含まれる。それは、ドキュメントのコンテントにおける正確な状態を示すからである。不明のタグや無効なタグは、ほとんどが綴りミスのタグや配置ミスのタグである。何がどこにあるかを知ることで、間違っているタグを有効なタグに置き換えることができる。allコレクションでは、不明のタグや無効なタグについては開始タグと終了タグを別々に示す。間違ったタグを1つの項目に結合しようとはしない。次のドキュメントでは、"HTML HEAD TITLE SCRIPT BODY ! P ZZZ> /ZZZ> /B"というメッセージを表示する。
<HTML>
<HEAD><TITLE>Elements: Collecting</TITLE>
<SCRIPT LANGUAGE="JScript">
function showElements() {
var tag_names = "";
for (i=0; i<document.all.length; i++)
tag_names = tag_names + document.all(i).tagName + " ";
alert("This document contains: " + tag_names);
}
</SCRIPT>
</HEAD>
<BODY onload="showElements()">

<P>This document has an <ZZZ>unknown</ZZZ> and an invalid</B> tag.
</BODY>
</HTML>
documentオブジェクトのallコレクションの他に、個々のエレメントにもallコレクションがある。HTMLの階層型を考えると、各エレメントでのallコレクションについて理解できる。エレメントのallコレクションには、そのエレメントに含まれるすべてのエレメントが含まれる。例えば、HTMLエレメントのallコレクションには、HTMLエレメント自体以外のソースコードのすべてが含まれる（これが、HTMLエレメントに対するallコレクションとdocument.allコレクションの違いである）。

また、各エレメントにはchildrenコレクションがある。このchildrenコレクションには、HTML階層のエレメントですぐ下のエレメントだけが含まれる。つまり、childrenコレクションには、エレメントのparentElementプロパティがそのエレメントであるエレメントだけを含む。childrenコレクションの内容は、重なったエレメントに対しては未定義である。

次の例では、ドキュメントのlengthとallコレクションとchildrenコレクションの内容を返す。HTMLタグの子には2つのエレメント（HEADとBODY）だけが存在する。TITLEエレメントとSCRIPTエレメントはHEADタグの子であり、HTMLタグの子ではない。
<HTML id=theHTML>
<HEAD>
<TITLE> Look at the all and the children collection</TITLE>
<SCRIPT>
function showme() {
alert('all: ' + window.theHTML.all.length);
for (i=0; i < theHTML.all.length;i++)
{
alert(theHTML.all[i].tagName);
}
alert('children: ' + window.theHTML.children.length);
for (i=0; i < theHTML.children.length;i++)
{
alert(theHTML.children[i].tagName);
}
}
</SCRIPT>
</HEAD>
<BODY onload=showme()>
<DIV> Some text in a DIV. This DIV will be in
the all collection of the HTML element</DIV>
</BODY>
</HTML>
その他のコレクション

オブジェクトモデルは、ドキュメントのエレメントにアクセスするために使用できるその他のコレクションを提供する。

コレクション名 適用内容

anchors documentオブジェクト空でないnameプロパティのあるAエレメント

applets document APPLETエレメント

areas MAPエレメントマップのAREAエレメント

cells TRエレメント行のTDエレメントやTHエレメント

elements FORMエレメントフォームのBUTTON、INPUT、SELECT、TEXTAREAエレメント

embeds document EMBEDエレメント

filters すべてのエレメント filterオブジェクト

forms document FORMエレメント

frames documentおよびwindow FRAMEエレメントとIFRAMEエレメントで定義されたwindowオブジェクト

images document IMGエレメント

links document 空でないhrefプロパティのあるAエレメント

options SELECTエレメント OPTIONエレメント

rows TABLE 表のTRエレメント

scripts document SCRIPTエレメント

tbodies TABLE TBODYエレメント

スクリプト可能なコレクションは、本当のエレメントではなく、スクリプト可能なオブジェクトのコレクションである。

コレクション名 適用内容

imports styleSheetオブジェクトスタイルシートで定義された@import文

styleSheets document styleSheetオブジェクト。LINKとSTYLEのインスタンスを表示する

filters element エレメントオブジェクトごとの定義されたCSSで定義されたフィルタ属性のコレクション。

rules styleSheetオブジェクトスタイル規則のコレクション。CSSのコンテキストセレクタとスタイルの結合。

allコレクションと同様に、これらのコレクションはドキュメントに対する変更を自動的に更新する。

コレクションの利用

オブジェクトモデルのコレクションは、プログラミング言語で作成する配列変数と似ている。項目に名前や識別子や序数インデックスを与えると、コレクションから項目を検索できる。序数インデックスとは、コレクションの中での項目の位置を示すものである。コレクションインデックスは0から始まるので、最初の項目のインデックスは常に0である。次のJScriptの例では、コレクションの6番目のエレメントであるPエレメントのタグ名を表示する。
<HTML>
<HEAD><TITLE>Elements: Retrieving Items</TITLE>
<SCRIPT LANGUAGE="JScript">
function showSixth() {
var el = document.all(5);
alert("The sixth element is: " + el.tagName);
}
</SCRIPT>
</HEAD>
<BODY onload="showSixth()">
<P>This is a very simple document.
</BODY>
</HTML>
コレクションのインデックス値は0から始まるので、コレクションの最後のエレメントのインデックスは、常にコレクションのlengthから1を引いた値である。従って、素早くコレクションの最後のエレメントにアクセスするには、コレクションのlengthから1を引いた値をインデックス値として使う。次に例を示す。
var elLast = document.all(document.all.length-1);
alert("The last element in this document is: " + elLast.tagName);
また、識別子を指定してコレクションから項目を検索できる。この場合、エレメントはID=属性で設定された有効な識別子を持たなければならない。次のJScriptの例では、識別子が"MyID"のエレメントのタグ名を表示する。
<HTML>
<HEAD><TITLE>Elements: IDs as Indexes</TITLE>
<SCRIPT LANGUAGE="JScript">
function showElementWithID() {
var el = document.all("MyID");
alert("The element having the identifier MyID is: " + el.tagName);
}
</SCRIPT>
</HEAD>
<BODY onload="showElementWithID()">
<P ID="MyID">This is a very simple document.
</BODY>
</HTML>
また、名前からもエレメントにアクセスできるが、name属性は主にフォームを作成するエレメントだけに適用されることに注意すること。ID属性は、すべてのエレメントに適用される識別子である。

IDは"固有の識別子"という概念だが、実際には固有でなければならないものではない。同じ識別子が1つ以上のエレメントにある場合、固有のエレメントではなく同じIDのあるエレメントのコレクションとなる。このコレクションには、序数でしかアクセスできない。ある識別子を持つエレメントがない場合、それへのアクセスの結果はnullとなる。

コレクションを返す識別子を使う場合、新しいコレクションのエレメントはドキュメントの中と同じ順番を持つ。これらのエレメントにアクセスするには、コレクションに0から始まるインデックスを適用するitemメソッドを使う。次に例を示す。
if (document.all("MyID").length != null)
alert("The first element that has the identifier MyID: " + document.all("MyID").item(0).tagName);
同じ識別子を持つエレメントが複数あることがあらかじめ分かっている場合は、この手続きを飛ばして、itemメソッドの2番目のオプションパラメータを使ってコレクションの読み出しを行わないで、エレメントを読み出せる。次のJScript例は、前の例と同じメッセージを表示する。
var el = document.all.item("MyID",0);
if (el != null)
alert("The first element that has the identifier MyID: " + el.tagName);
JScriptやVBScript (Visual Basic® Scripting Edition)などのスクリプト言語でも、その言語のインデックスを付ける構文でコレクションのエレメントにアクセスできる。JScriptでは、配列にインデックスを付ける3つの方法が用意されている。角括弧で囲んだ整数のインデックス、角括弧で囲んだ文字列の識別子、ピリオドに接頭辞を付けた識別子である。次のJScriptステートメントで3つの方法を示す。
var el = document.all[2];    // document.all.item(2)と同じ
var el = document.all["MyID"];   // document.all.item("MyID")と同じ
var el = document.all.MyID;      // document.all.item("MyID")と同じ
再度言うが、この方法で識別子を使う場合には注意が必要である。与えられた識別子を持つエレメントが1つ以上ある場合、コレクションはコレクションを返す。返された値を使用する前に、常にチェックすること。

importsコレクションの項目にアクセスする場合は、識別子を使用できない。このコレクションにはHTMLエレメントではなくインポートされたスタイルシートが含まれるので、利用可能な識別子がない。代わりに、整数のインデックスを使用できる。framesコレクションの項目にアクセスするには名前を使えるが、どの2つのウィンドウも同じ名前を持たないことを確認しなくてはならない。この確認を行わないと、同じ名前のもののうち最初のウィンドウにしかアクセスできなくなる。

新しいコレクションの作成：tagsメソッド

tagsメソッドは、指定されたタグ名のあるエレメントのコレクションを作成する。このメソッドは既存のコレクションをフィルタし、指定されたタグ名の新しいコレクションを作成する。例えば、次のJScriptスクリプトのコードでは、tagsメソッドをallコレクションに適用し、ドキュメントのTABLEエレメントだけを含む新しいコレクションを読み出す。その後、各テーブルに枠線を付ける。
var doc_tables = document.all.tags("TABLE");
for (i=0; i<doc_tables.length; i++)
doc_tables(i).border = 1;
tagsメソッドでは、あらゆるタグ名（無効なHTMLのタグ名ですら）を検索できる。当てはまる名前のエレメントを複数見つけた場合、そのコレクションを返す。当てはまる名前のエレメントが見つからない場合は、空のコレクションを返す。コレクションのエレメントの数を調べるには、lengthプロパティを使用する。lengthプロパティがゼロの場合は、コレクションは空である。

tagsメソッドは、新しいコレクションを作成する際に、エレメントの順番を保存する。このため、新しいコレクションの最初のエレメントは、ドキュメント中で一致するタグの最初のインスタンスである。

tagsメソッドから返されたコレクションはallコレクションのサブセットなので、エレメントにアクセスするのに使う序数値は、all コレクションのエレメントにアクセスする場合の序数値とは異なる。両方の序数値を知っておくと便利な場合もある。エレメントのsourceIndexプロパティは、ドキュメントのallコレクションにおけるエレメントの序数位置を返す。

エレメントプロパティへのアクセス

多くのエレメントプロパティには名前がある。それは、エレメントのHTML属性とそれの値が対応して対になる。プロパティの属性がどう設定されているかを知るために、その値を得ることができ、多くの場合このプロパティの値を変更すると、エレメントに動的に影響を与えられる。この概念は、ダイナミックスタイルとダイナミックコンテントを実現するための鍵となる。スタイルとコンテントを変更するプロパティにアクセスするには、ドキュメントオブジェクトモデルで公開されるコレクションから、エレメントオブジェクトにアクセスすればよい。例えば、H1エレメントを中央に配置するには、ドキュメントのallコレクションでH1エレメントにアクセスし、そのalignプロパティに"center"（ALIGN=属性で使うのと同じ値）を設定する。
var coll = document.all.tags("H1");
if (coll.length>0)
coll(0).align="center";
同様に、srcプロパティを設定すると、IMGエレメントに対応するイメージファイル名を変更できる。
var coll = document.all.tags("IMG");
if (coll.length>0)
coll(0).src="newimage.gif";
大部分のプロパティは同じ名前を持ち、対応する属性として同じ値を取る。つまり、大部分のプロパティは文字列、列挙型、数値である。プロパティ名が対応する属性と異なる場合は、通常は属性名にとても似ている。例えば、classNameプロパティはCLASS=属性に対応する。名前が一致しないのは、一般的なスクリプト言語のキーワードと衝突することを避けるためや、プロパティ名にスクリプト言語にとって無効な文字がないようにするためである。

サブオブジェクトを持つプロパティは少ししかない。例えば、styleオブジェクトはSTYLE=属性に対応し、インラインスタイルとしてエレメントに適用できるCSS属性のすべてにアクセスするサブオブジェクトを持つ。styleオブジェクト自体では、エレメントの外観や形式を変更するために設定するプロパティを取る。次の例では、styleオブジェクトを使い、H1エレメントのすべてのCSSのcolor属性を緑に変更する。
var coll = document.all.tags("H1");
for (i=0; i<coll.length; i++)
coll[i].style.color = "green";
対応するエレメント属性がないプロパティもある。これらのプロパティでは、属性では利用できないエレメントについての情報を象徴的に与える。例えば、tagNameプロパティはエレメントのHTMLタグ名を指定し、sourceIndexプロパティはドキュメントのallコレクション中のエレメントに対する位置を指定する。

多くのプロパティの値は取得したり設定できるが、取得した値が"読み込み専用"（値を設定したり変更できない）のものもある。例えば、tagNameプロパティは読み込み専用のプロパティで、エレメントのタグを変更することはできない。

HTMLドキュメントは、無効な属性や、属性に割り当てるには無効な値を含むことがある。無効な値が属性に割り当てられる場合、対応するプロパティには常にデフォルトの値が設定される。例えば次の例では、"middle"はALIGN=属性に無効な値なので、ドキュメントはデフォルトの"left"（alignプロパティのデフォルト値）をメッセージとして表示する。
<HTML>
<HEAD><TITLE>Elements: Using Properties</TITLE>
<SCRIPT LANGUAGE="JScript">
function showAlignment() {
var coll = document.all.tags("H1");
for (coll.length>0)
alert("The alignment for the first heading is " + coll(0).align);
}
</SCRIPT>
</HEAD>
<BODY onload="showAlignment()">
<H1 ALIGN="middle">Welcome!</H1>
<P>This document is <B>very</B> short.
</BODY>
</HTML>
getAttribute、setAttribute、removeAttributeメソッドにより、プロパティを使用しなくてもその属性にアクセスできる。属性名を指定すると、これらのメソッドでは属性の現在の値を返したり設定できる。また、属性を削除することもできる。

例えば、次の例のように、getAttributeメソッドとsetAttributeメソッドを使うと（alignプロパティを読み出さずに）、ALIGN=属性の現在の値を取得して設定できる。この例ではALIGN=属性の現在の値（"left"）を表示し、その後で"center"に変更してH1エレメントを中央に表示する。
<HTML>
<HEAD><TITLE>Elements: Using Methods</TITLE>
<SCRIPT LANGUAGE="JScript">
function showAndSetAlignment() {
alert(document.all.MyHeading.getAttribute("align"));
document.all.MyHeading.setAttribute("align","center");
}
</SCRIPT>
</HEAD>
<BODY onload="showAndSetAlignment()">
<H1 ID=MyHeading ALIGN="left">Welcome!</H1>
<P>This a short document.
</BODY>
</HTML>
未定義の属性や無効な値を扱う場合に、attributeメソッドが非常に便利である。例えば、属性に無効な値がある場合、getAttributeメソッドは属性に対するデフォルト値ではなく、正確な値を返す。このため、このメソッドを使用すると、HTMLドキュメントの正確な値を調査でき、それに基づいて決定を下すことができる。次のドキュメントでは、getAttributeメソッドを使用して、H1エレメントのaligmentを修正する（" middle "は無効な値である）。
<HTML>
<HEAD><TITLE>Elements: Invalid Values</TITLE>
<SCRIPT LANGUAGE="JScript">
function checkValues() {
if (document.all.MyHeading.getAttribute("align")=="middle")
document.all.MyHeading.setAttribute("align","center");
if (document.all.MyHeading.getAttribute("xyz")!="123")
document.all.MyHeading.setAttribute("xyz","123");
}
</SCRIPT>
</HEAD>
<BODY onload="checkValues()">
<H1 ID=MyHeading XyZ="123" ALIGN="middle">Welcome!</H1>
<P>This is a short document.
</BODY>
</HTML>
デフォルトではこれらのメソッドは大文字と小文字の区別をしない。そのため、上記の例では"xyz" が"XyZ"であっても、このメソッドはこの属性を取得して設定してしまう。このメソッドで正確に一致する属性を探せるように制御するには、オプションのcase-sensitiveパラメータをtrueに設定する。例えば、次に示すコードのように前の例を置き換えると、"xyz"は"XyZ"と一致しないので"Not found"が表示される。
if (document.all.MyHeading.getAttribute("xyz", true)==null)
alert("Not found");
これらのメソッドの大文字と小文字を区別する方法で、複数の一致が見つかった場合、返される値がどうなるかはプラットフォームが異なる場合も一致するかどうかは保証されない。

エレメント階層を調べる

HTMLドキュメントのエレメントは、いくつかのものに他のものが含まれて階層構造を作っている。階層の最上位はHTMLエレメントであり、これにはドキュメントのすべてのエレメントが含まれる。HTMLに含まれるBODYエレメントはドキュメントである。Pのようなブロックエレメントにはテキストやインラインエレメントがあり、そのエレメント自体にもテキストやインラインエレメントを含むことがある。

この階層構造を調べるには、containsメソッドとparentElementプロパティを使用する。各エレメントのallコレクションとchildrenコレクションを使っても、ドキュメント構造を決定できる。

containsメソッドはtrueやfalseを返し、1つのエレメントが他のエレメントを含むかどうかを示す。エレメントにこのメソッドを適用し、パラメータとして他のエレメントを与えることができる。例えば、次の例では、BODYエレメントはPを含むので、メッセージ"True!"を表示する。
<HTML>
<HEAD><TITLE>Elements: Hierarchy</TITLE>
<SCRIPT LANGUAGE="JScript">
function showContains() {
var el = document.all.tags("P").item(0);
if (document.body.contains(el))
alert("True!");
else
alert("False!");
}
</SCRIPT>
</HEAD>
<BODY onload="showContains()">
<P>This is a very simple document.
</BODY>
</HTML>
上記の例では、documentオブジェクトのbodyプロパティがBODYオブジェクトを呼び出すために使われている。

parentElementプロパティは、常にエレメントを含む次の階層エレメントを指す。より複雑なスクリプトでcontainsとparentElementを組み合わせると、エレメントドキュメントの階層を決定できる。次のドキュメントでは、containsとparentElementを使って階層を決定し、階層を示すメッセージを表示する。
<HTML>
<HEAD><TITLE>Elements: Hierarchy</TITLE>
<SCRIPT LANGUAGE="JScript">
function showHierarchy() {
var depth = 0;
var msg = document.all(0).tagName;
for (i=1; i<document.all.length; i++) {
if (document.all(i-1).contains(document.all(i))==true) {
depth = depth + 1;
} else {
var elParent = document.all(i-1).parentElement;
for ( ; depth>0; depth--) {
if (elParent.contains(document.all(i))==true)
break;
elParent = elParent.parentElement;
}
}
msg = msg + "\n";
for (j=1; j<=depth; j++)
msg = msg + "  ";
msg = msg + document.all(i).tagName;
}
alert("This document contains:\n" + msg);
}
</SCRIPT>
</HEAD>
<BODY onload="showHierarchy()">
<H1>Welcome!</H1>
<P>This document is <B>very</B> short.
</BODY>
</HTML>
エレメントの位置と大きさの取得

エレメントの位置、幅、高さを知るには、offsetLeft、offsetTop、offsetHeight、offsetWidthプロパティを使用する。これらの数値プロパティにはエレメントの物理的な座標と大きさをその基準となる親エレメントからの相対値で指定する。例えば、次の例は、ドキュメントの高さと幅にぴったりとなるようにその大きさを合わせる簡単な時計である。

  <HTML>
  <HEAD><TITLE>A Simple Clock</TITLE>
  <SCRIPT LANGUAGE="JScript">
  function startClock() {
      window.setInterval("Clock_Tick()", 1000);
      Clock_Tick();
  }
  var ratio = 4;
  function Clock_Tick()
  {
      var s = Date();
      var t = s.substring(11,19);
      var doc_height = document.body.offsetHeight;
      var doc_width = document.body.offsetWidth;
      if ((doc_height*ratio)>doc_width)
          doc_height = doc_width / ratio;
      document.all.MyTime.innerText = t;
      document.all.MyTime.style.fontSize = doc_height;
  }
  </SCRIPT>
  </HEAD>
  <BODY onload="startClock()">
  <P ID="MyTime">&nbsp;</P>
  </BODY>
  </HTML>
offsetLeftプロパティとoffsetTopプロパティの値は、エレメントのoffsetParentプロパティで指定したエレメントからの相対阿智である。多くの場合、その値はBODYを返す。例えば次の例で示すように、TDエレメントがドキュメントのかなり右に表示されても、基準となる親がTRでありドキュメント自体ではないので、その位置は(0,0)となる。

  <HTML>
  <HEAD><TITLE>A Simple Clock</TITLE>
  <SCRIPT LANGUAGE="JScript">
  function startClock() {
      window.setInterval("Clock_Tick()", 1000);
      Clock_Tick();
  }
  var ratio = 4;
  function Clock_Tick()
  {
      var s = Date();
      var t = s.substring(11,19);
      var doc_height = document.body.offsetHeight;
      var doc_width = document.body.offsetWidth;

      if ((doc_height*ratio)>doc_width)
          doc_height = doc_width / ratio;
      document.all.MyTime.innerText = t;
      document.all.MyTime.style.fontSize = doc_height;
  }
  </SCRIPT>
  </HEAD>
  <BODY onload="startClock()">
  <P ID="MyTime">&nbsp;</P>
  </BODY>
  </HTML>
表示されるようにエレメントをスクロールさせる

他の便利なメソッドとしてscrollIntoViewがある。このメソッドは、エレメントをウィンドウの上端や下端に表示されるようにスクロールする。このメソッドは、何らかのアクションの結果をすぐにユーザーに表示する場合に役立つ。ユーザーは結果を見るために手でドキュメントをスクロールする必要がない。次の例では、5番目の段落のコンテントを強調し、ウィンドウの上端に表示するようにその段落をスクロールする。
var coll = document.all.tags("P");
if (coll.length>=5) {
coll(4).style.textDecoration = "underline";
coll(4).scrollIntoView(true);
}
トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.

コレクション名	適用	内容
anchors	documentオブジェクト	空でないnameプロパティのあるAエレメント
applets	document	APPLETエレメント
areas	MAPエレメント	マップのAREAエレメント
cells	TRエレメント	行のTDエレメントやTHエレメント
elements	FORMエレメント	フォームのBUTTON、INPUT、SELECT、TEXTAREAエレメント
embeds	document	EMBEDエレメント
filters	すべてのエレメント	filterオブジェクト
forms	document	FORMエレメント
frames	documentおよびwindow	FRAMEエレメントとIFRAMEエレメントで定義されたwindowオブジェクト
images	document	IMGエレメント
links	document	空でないhrefプロパティのあるAエレメント
options	SELECTエレメント	OPTIONエレメント
rows	TABLE	表のTRエレメント
scripts	document	SCRIPTエレメント
tbodies	TABLE	TBODYエレメント

エレメントとコレクションにおけるスクリプト記述

エレメントとコレクションにおけるスクリプト記述

allコレクションとchildrenコレクション

その他のコレクション

コレクションの利用

新しいコレクションの作成：tagsメソッド

エレメントプロパティへのアクセス

エレメント階層を調べる

エレメントの位置と大きさの取得

表示されるようにエレメントをスクロールさせる

その他のリソース