JavascriptのDOMについて

質問

JavascriptのDOMについて
<textarea id="ta"></textarea>
というHTMLがあり、Javascriptで、
document.getElementById("ta").value = "test";
とすれば表示されますが、この .valueプロパティを知らずに最初 .innerHTMLとしていました。
textareaのプロパティで書き込むのはvalueと知る方法が知りたいです。
知らない人は.valueすら想像できません。
皆さんは、どのようにしてプロパティを見つけているのでしょうか？

回答No.8

Chaire · ベストアンサー

下記サイトが真っ先に挙がると思っていましたが。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/

特に次のページをブックマークに入れて下さい。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/object-index.html

HTML の textarea 要素（≠タグ）は、DOM の HTMLTextAreaElement に対応します。表の一番左の「interface」の列を探して下さい。HTMLTextAreaElement が見つかったら、右側のセルを見て下さい。これに属するオブジェクトは value というプロパティを持っていることが分かります。このプロパティが具体的に何であるかはリンク先を見て下さい。

さらに、HTMLTextAreaElement の行の一番右を見ると HTMLElement と書いてあります。これは、HTML***Element がここから派生していることを意味します。再び表の左の「interface」の列から HTMLElement を探して下さい。HTMLElement に属するオブジェクトは、className や id といった HTML の要素における一般的な属性を持つことが分かります。

さらにさらに、HTMLElement は Element から派生していることが分かります。これは HTML に限らず、XML の一般的な要素（≠タグ）を意味します。これに属するオブジェクトは、tagName というプロパティや、getElementsByTagName などのメソッドを持つことが分かります。

さらにさらにさらに、Element は Node から派生しています。これは、XML/HTML が木構造で表せることから、その節点（ノード）を抽象化したものです。典型的には要素やテキストが節点になります。ここに属するオブジェクトは appendChild、removeChild などのメソッドを持っています。

結局、HTML の textarea 要素は、Node から派生した Element から派生した HTMLElement から派生した HTMLTextAreaElement であるため、これらに定義されたプロパティとメソッドを全て持っているわけです。

こうした継承関係に慣れて下さい。これはつまり、HTMLTextAreaElement に近づくほど「textarea 要素ならではの」プロパティ・メソッドが定義され、Node に近づくほど「抽象的・一般的な」プロパティ・メソッドが定義されている、ということです。従って、コードの中で「ここは textarea 要素でないと駄目」という部分には、HTMLTextAreaElement のものを使って「きつく」作ります。逆に「ここは何でも良い」という部分には、より抽象的なものを使って「ゆるく」作ります。こうすることで、不測な事態にも強い頑健なプログラムになります。不慣れなコードでは、「きつく」作るべきところで「ゆるく」、「ゆるく」作るべきところで「きつく」と、逆に書かれていることが多い気がします。

ここまでで innerHTML が出てこないことにお気付きでしょうが、これはもともと IE の独自拡張です。最初のうちはそれほど必要ありませんし（率直な話、HTML すら覚束ない段階で innerHTML をきちんと使えるとは思いません）、innerHTML についての情報はすぐ見つかるでしょう。最近の HTML5 において、HTMLElement のプロパティとして innerHTML が定義・標準化されています。

回答No.7

think49

#6の続き。

■4. 各ブラウザベンダーが提供する開発者向けリファレンス
JavaScriptはブラウザ毎に微妙な仕様の違いがあり、各々のブラウザベンダーが開発者向けリファレンスを公開しています。
Firefox(Gecko), GoogleChrome(Webkit), Safari(Webkit), Opera は仕様差が少ないので、情報量の多いMDCから見ておくと良いです。
あとは、仕様が違うことの多いIE(Trident)ですね。
MDCを見てコーディングし、「IEで上手く動かない！」って時にMSDNをチェックすれば、大抵は事足ります。

Mozilla Developer Center - MDC
https://developer.mozilla.org/ja
DOM Reference - MSDN
http://msdn.microsoft.com/en-us/library/ms764730%28VS.85%29.aspx
Safari Reference Library
http://developer.apple.com/safari/library/navigation/
Opera のドキュメント
http://www.opera.com/docs/
Google Chrome ヘルプ
http://www.google.co.jp/support/chrome/?hl=ja

--------
MDCで検索するとき、サイト内に用意されている検索フォームを使うと、必ず英語のリファレンスに飛びます。
これを回避するために、Google検索を利用すると良いです。

getElementById site:developer.mozilla.org - Google 検索
http://www.google.co.jp/search?ie=UTF-8&hl=ja&q=getElementById+site%3Adeveloper.mozilla.org

site演算子を入力するのが面倒なときには、「getElementById MDC」でも構いません。(大抵はひっかかります)

getElementById MDC - Google 検索
http://www.google.co.jp/search?ie=UTF-8&hl=ja&q=getElementById+MDC

このテクニックはMDCに限定せず使えるので、覚えておくと何かと重宝します。
--------

■総括
いろいろ書きましたが、最終的にはFirebugで調べて必要に応じて開発者向けリファレンスを引くだけでいいかな、と思います。
基本的なプロパティを知りたい場合は、書籍を読むのがいいと思います。
(書籍については下記スレッドにも書きましたので、よかったら参考にしてください)

javascriptをもっと自由自在に書けるようになるには、基本知識と | OKWave
http://okwave.jp/qa/q5932779.html

回答No.6

think49

私が知る限りでは、DOMノードが持つプロパティを調べる方法は4つあります。

■1. 参考書
初めは、書籍に記載されているプロパティを一つ一つ確かめる作業をしていました。

『Javascript ビジュアル・リファレンス改訂版』
http://www.amazon.co.jp/dp/4844359568/
『WebクリエイティブのためのDOM Scripting』
http://www.amazon.co.jp/dp/4839922268

■2. 開発者ツール (Firebug)
その内、開発者ツールなるものを知って、Firebugで調べるように。
(現在に至っては GoogleChrome の開発者ツールを使っていますが、始めて使うならFirebugが良いと思います。)
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view2&f=2251&no=6-

■3. DOM仕様書
細部まで知りたいときには仕様書を読みます。
参考書のように初めから最後まで通して読むことはありませんが、「このプロパティ(メソッド)はどういう動きをしているんだろう？」という状況で仕様書を引いています。
とりあえず、『DOM Level 2 コア規定』『DOM Level 2 HTML Specification』『DOM Level 2 イベント規定』の3つを抑えておけば、問題ないと思います。

DOM Level 1 規定
http://www.y-adagio.com/public/standards/tr_dom1/expanded-toc.html

DOM Level 2 コア規定
http://www.y-adagio.com/public/standards/tr_dom2_core/expanded-toc.html
DOM Level 2 HTML Specification
http://www.w3.org/TR/DOM-Level-2-HTML/
DOM Level 2 イベント規定
http://www.y-adagio.com/public/standards/tr_dom2_events/expanded-toc.html
DOM Level 2 ビュー規定
http://www.y-adagio.com/public/standards/tr_dom2_views/expanded-toc.html
DOM Level 2 スタイル規定
http://www.y-adagio.com/public/standards/tr_dom2_style/expanded-toc.html
DOM Level 2 たどり規定及び範囲の規定
http://www.y-adagio.com/public/standards/tr_dom2_traran/expanded-toc.html

Document Object Model (DOM) Level 3 XPath Specification
http://www.w3.org/TR/DOM-Level-3-XPath/
Document Object Model (DOM) Level 3 Load and Save Specification
http://www.w3.org/TR/DOM-Level-3-LS/
Document Object Model (DOM) Level 3 Abstract Schemas Specification
http://www.w3.org/TR/DOM-Level-3-AS/
Document Object Model (DOM) Level 3 Views and Formatting Specification
http://www.w3.org/TR/DOM-Level-3-Views/
Document Object Model (DOM) Level 3 Events Specification
http://www.w3.org/TR/DOM-Level-3-Events/

(文字数制限につき、次の記事に続きます。)

回答No.5

yyr446

＜皆さんは、どのようにしてプロパティを見つけているのでしょうか？＞

・ちゃんとした学校や、ちゃんと学習したわけじゃありませんが、習った事は忘れる
　のが普通の人です。仕様毎に全てのリファレンスを暗記してる人なんていません。
　でも、基本的な部分とかは、しょっちゅう出てくるので、覚えていくし、類推の勘どころ
　もきくようになってきます。
　（まあ最初のうちは、わからなかったらリファレンスを見るの繰り返しです）

・ある程度、わかってくると、もっと知りたくなってきます。そうなってくると、
　万人向けの書籍や入門サイトではお手上げです。
　しかも、ブラウザーの種類やバージョンによって、まちまちなの物が多量にある　
　のに気づかれると思います。

そうなってくると、使ってるブラウザー（Ff、IE）で、No.4さんみたいに列挙してみたり
して、ネットで調べます。

Firefoxは、
https://developer.mozilla.org/en/Gecko_DOM_Reference
が原点で、結構調べやすいです。
IEは、MSDN技術資料↓
http://msdn.microsoft.com/ja-jp/library/bb905071%28v=MSDN.10%29.aspx
が原点ですが、ここを弄るのはたいへんなので、Google検索した方が早いです。

GoogleChromeやサファリ、オペラはとりあえず無視です。

たまにW3Cも見ます。
http://www.w3.org/TR/DOM-Level-2-HTML/def-index.html
ここは索引から探すのが早いです。

javascript自体のおおもとは、ECMAの標準ですが、
ほとんど見ないですね。それよりブラウザーに実装されている
javascript仕様やHTML/CSS/DOM仕様の方が重要ですね。

回答No.4

yambejp

こんな風にするとプロパティを探すことはできます

<textarea id="ta">
test
</textarea>
<script>
var ta=document.getElementById("ta");
for(var i in ta){
document.write(i+":"+ta[i]+"<br>");
}
</script>

回答No.3

nine999

私は必ずリファレンス本を手元に置いています。
使いたい機能を探す時、初めて使うエレメントやプロパティを調べるには必須です。
もちろん、ネットにもリファレンスサイトがあるのでそれも活用しています。
ただ、サイトの場合、更新があまりされないことが多いので、情報が古かったり足りないことがあります。
最新の書籍を購入するようにしています。

<textarea>って、HTMLで勉強したときは、valueは使わずにタグの間に初期値を書きますから、ついうっかりはしそうですね。

回答No.2

SAYKA

見つけているというよりも、そういう「共通項」が有る事を知っているかそういう資料を持っているんじゃないかな。
実際、htmlのid属性やstyle属性は共通で、どこにでもでてくるよね。

あとはまぁ　こういうの(これはDOM1だけど)
http://www.doraneko.org/misc/dom10/19981001/cover.html

ブラウザ毎の細かい違いは別途それぞれの開発のサイトとかを漁ると出てくるよ。

回答No.1

0909union

＞知らない人は.valueすら想像できません。
＞皆さんは、どのようにしてプロパティを見つけているのでしょうか？

これは、そもそもあなたがどのように勉強したかですね。独学か、町のパソコン教室でしょうか？

もし、ちゃんとした学校や、プログラムを学習した人ならこのような質問にはならないでしょう。

基本的にプログラムは、決まりごとなので、言語ごとに「仕様書」とか「リファレンス」とか定義している機関や教則本があります。HTML及びDOMも例外ではありません。HTML＆DOM＆CSSはW3Cのサイトにしっかりと定義文（仕様書）が記載されています。これは英語サイトなので、日本語に翻訳したサイトもあります。

ただ、このサイトは仕様書がのっているので、学習するのには適しません。しかし、どのようなプロパティがあるとか、メソッドがあるかはわかりますね。

初心者が見るのなら、本屋や図書館でHTML＆JavaScriptの教則本を買ってください。

もちろんネット上でも公開されています。

"HTML　リファレンス"
"リファレンス　HTML"

で検索してみてください。自分で一番見やすいリファレンスサイトを探してください。最近はHTMLもバージョン５が出たので、それぞれのサイトで更新がかかっています。

つまり、回答は「リファレンスを見る」です。

あと、HTML＆DOMはブラウザにより対応の仕方が違います。何のブラウザが何のDOMやメソッドに対応しているか一覧になっている、本やサイトがいいです。これを意識しないで、サンプルを記載している人がいますが、素人でしょう。

C言語やC++、Javaを習得した人なら、リファレンスを見るだけで、だいたいわかってしまいます。