※このドキュメントは長くは残りませんので、必要であればハードディスクに保存してください。


オブジェクト

まず、JavaScriptの根幹である「オブジェクト」について、少し触れておきます。JavaScriptは「オブジェクト指向型言語」ですから、仕組みから学ぶ時はオブジェクトの理解が必須なのです。

この言語は、ほとんどのものがオブジェクトです。なにがなんでもオブジェクトです。windowとかdocumentなどおなじみのやつを始めとして、変数も配列もオブジェクトですし、メソッドや自作の関数もオブジェクトなら、HTMLまでもオブジェクト(ドキュメントオブジェクトモデル=DOM)となります。

オブジェクトは基本的に「操作されるもの」で、ただ存在するだけです。ただし、例外として、メソッドと関数は「操作するもの」です。(機能を持ったオブジェクト、ということです)
オブジェクトは、メソッドや関数、プロパティなどで、色々な操作をします。

document.write()
documentオブジェクト+writeメソッド
(ドキュメントに書き出す)
location.href
locationオブジェクト+hrefプロパティ
(ページのアドレスを参照)
document.getElementById("idName").innerHTML;
documentオブジェクト+getElementByIdメソッド+innerHTMLプロパティ
(ドキュメントにあるタグのIDを取得して、タグ内のHTMLを参照)
window.location.replace("index.html");
windowオブジェクト+locationオブジェクト+replaceメソッド
(ウィンドウのページのアドレスをindex.htmlに置換する)
"文字列".link("index.html").fontcolor("red").bold();
文字列+linkメソッド+fontcolorメソッド+boldメソッド
(文字列にリンクを張って色を赤にして太字にする)

など、ドット演算子(ピリオド)でつなげて、オブジェクトを操作します。(最後のやつはちょっと特殊ですけど)
見てわかる通り、オブジェクトがなければ、メソッドもプロパティも意味を持ちませんよね。単にwrite()とやっても、「どこに書くの?」となってしまいます。

この場合はwindow.write()と解釈されて、windowオブジェクトはwrite()メソッドを持っていない旨のエラーが出ます。

また、単にdocumentだけでは、「documentをどうするの?」となります。

オブジェクトがあって、メソッドやプロパティで参照や設定などの操作をする。
これがJavaScriptの基本です。
ちなみにプロパティというのは、早い話が「オブジェクトが持っている値」または「オブジェクトに設定されている値」です。innerTextとinnerHTMLは関数でなく、プロパティです。

これらを踏まえた上で、JavaScriptでは、「オブジェクトの××を(に)・〜する」というのが基本構文となります。「××を(に)」の部分がプロパティです。
たとえば、document.form.element.valueだったら、「documentオブジェクトのformオブジェクトのelementオブジェクトのvalue」で、valueがプロパティとなります。valueならオブジェクトにあるvalue="値"を参照しますし、checkedならチェックされているかをtrue/falseで返します。
このように、オブジェクトはそれぞれ決まったメソッド・プロパティを持っています。(アンクJavaScript辞典の巻末の方に、主なものが載ってます)

document.form.element.value = "値の代入";
→オブジェクト(フォーム部品)のvalueに・文字列を設定する
hensuu = document.form.element.value;
→オブジェクト(フォーム部品)のvalueを・変数に代入する
document.form.element.value.toLowerCase();
→オブジェクト(フォーム部品)のvalueを・全部小文字に変換する

さらに、

document.formName.elementName.value.length;
→オブジェクト(フォーム部品)のvalueの長さ(文字数)

てな感じで、二重や三重にプロパティを重ねることもあります。(valueもlengthもプロパティです)
この例の場合は「〜する」の部分がないので、参照はしますが、なにも起きません。

まぁ、オブジェクト概念は説明も理解も難しいんですが、(達者な人を目指すなら)やはり必須です。理解できると、すごく柔軟な組み方ができますよ。色々なスクリプトを組みながら、少しずつ、かつ体験的に習得してくださいね。(みっちり取り組めば、1年で結構なとこまで行けます)
あと、オブジェクト概念の解釈には、いくつか自分独自と思われる箇所があります。あんまり信じすぎないでください。(苦笑)


innerTextとinnerHTML

で、やっと本題ですが、innerTextは「オブジェクト内の文字列のみ」、innerHTMLは「オブジェクト内のHTML」という意味を持つプロパティです。このふたつは参照(取得)も設定もできます。つまり、タグやテキストを自由自在に書き換えられる、夢のような代物です。
ただし、現在のところは仕様書にはなく、独自拡張扱いです。IE4以降とネスケ6以降のみが対応しています。

innerTextとinnerHTMLは、タグオブジェクト(そんな呼称は規定されていませんけど)が持っているプロパティです。よって、こやつらを使うためには、まずタグをJavaScriptで使うためのオブジェクトとして取得する必要があります。
取得には、allコレクションまたはgetElementByIdメソッドを使います。(ID名から取得する場合)

<td id="idName">テキスト</td>

とある場合、

IE4以降のみ:
tagObj = document.all("idName");
IE5以降とネスケ6以降、Operaなど:
tagObj = document.getElementById("idName");

これで<td>のオブジェクトが変数 tagObj に入ります。簡単ですね。
もちろん、ID名は重複できません。重複するとエラーになりますのでご注意ください。OperaはgetElementByIdには対応してますが、innerTextとinnerHTMLには非対応です。

さて、こうしてゲットしたタグオブジェクトに対し、innerTextやinnerHTMLのプロパティで、値(タグの中身)を取得したり設定したりします。

nakami = tagObj.innerHTML; //タグ内のHTMLを・変数に代入
tagObj.innerText = "書き換え!"; //タグ内のテキストを・「書き換え!」に設定

ただ、自分の経験上、innerTextは使う機会があまりないです。IEしか対応してませんし。「innerHTMLではタグも一緒に取得されて困る!」って時だけ使いましょう。

上記の例では「タグオブジェクトを変数に入れる」「変数にプロパティを設定」の2ステップですが、

nakami = document.getElementById("idName").innerHTML;
document.getElementById("idName").innerText = "書き換え!";

のようにまとめることもできます。こっちの方がよく使われますが、同じタグオブジェクトに何回もアクセスする場合、変数に格納しておいた方が効率面で有利です。

なお、[3774]で使ったgetElementsByTagName()は、カッコ内に指定したタグを配列で取得するメソッドです。使い方によっては便利ですが、融通がきかないのでちょっとばかり慣れが必要です。


> 以前紹介していただいたアンク著のJavaScript辞典でも詳しく紹介されていないもので・・・

innerHTMLを説明するとなると、document.allやgetElementByIdも解説せねばならず、それを解説するとinnerHTML以外のプロパティも解説せねばならず、そうすると本の趣旨を外れてしまうからだと思います。(この本はDHTMLについてほとんど触れず、基本に徹してますから…)

> 解答を聞いてると、頻繁にでてくるような・・・

いったん表示させた内容を後から書き換えるのは、innerText/innerHTMLでしかできないからです。初心者さんの質問にはそういうのが多いので…。(笑)


最後に、再三言いますが、このような最先端の構文は、古いブラウザ・少数派ブラウザをまとめて切り捨ててしまいます。動かなくても支障のないように、代替策も用意しておくことをおすすめします。

以上、JavaScriptの理解を求めておられるようですので、少し詳しく書いてみました。貴方も私もお疲れさまでした。(笑)


余談

タグオブジェクトで使うIDは、ほとんどのタグに設定できます。
これを利用して、

<input id="elementID" type="button" value="ボタン">
document.getElementById("elementID").value = "ボタンの文字を変更!";
<img id="imgID" src="image.png">
document.getElementById("imgID").src = "imageChange.jpg";

というような一発アクセスも可能です。
将来的にはこちらの方法へ移行し、従来のnameで追っていく方法は廃止されます。


2002.8.1.Thu
ぴろあき
- Mail