JavascriptのDOMについて
<textarea id="ta"></textarea>
というHTMLがあり、Javascriptで、
document.getElementById("ta").value = "test";
とすれば表示されますが、この .valueプロパティを知らずに最初 .innerHTMLとしていました。
textareaのプロパティで書き込むのはvalueと知る方法が知りたいです。
知らない人は.valueすら想像できません。
皆さんは、どのようにしてプロパティを見つけているのでしょうか?
No.8ベストアンサー
- 回答日時:
下記サイトが真っ先に挙がると思っていましたが。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/
特に次のページをブックマークに入れて下さい。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
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
- 回答日時:
#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 …
Safari Reference Library
http://developer.apple.com/safari/library/naviga …
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= …
site演算子を入力するのが面倒なときには、「getElementById MDC」でも構いません。(大抵はひっかかります)
getElementById MDC - Google 検索
http://www.google.co.jp/search?ie=UTF-8&hl=ja&q= …
このテクニックはMDCに限定せず使えるので、覚えておくと何かと重宝します。
--------
■総括
いろいろ書きましたが、最終的にはFirebugで調べて必要に応じて開発者向けリファレンスを引くだけでいいかな、と思います。
基本的なプロパティを知りたい場合は、書籍を読むのがいいと思います。
(書籍については下記スレッドにも書きましたので、よかったら参考にしてください)
javascriptをもっと自由自在に書けるようになるには、基本知識と | OKWave
http://okwave.jp/qa/q5932779.html
No.6
- 回答日時:
私が知る限りでは、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? …
■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 …
DOM Level 2 コア規定
http://www.y-adagio.com/public/standards/tr_dom2 …
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 …
DOM Level 2 ビュー規定
http://www.y-adagio.com/public/standards/tr_dom2 …
DOM Level 2 スタイル規定
http://www.y-adagio.com/public/standards/tr_dom2 …
DOM Level 2 たどり規定及び範囲の規定
http://www.y-adagio.com/public/standards/tr_dom2 …
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
- 回答日時:
<皆さんは、どのようにしてプロパティを見つけているのでしょうか?>
・ちゃんとした学校や、ちゃんと学習したわけじゃありませんが、習った事は忘れる
のが普通の人です。仕様毎に全てのリファレンスを暗記してる人なんていません。
でも、基本的な部分とかは、しょっちゅう出てくるので、覚えていくし、類推の勘どころ
もきくようになってきます。
(まあ最初のうちは、わからなかったらリファレンスを見るの繰り返しです)
・ある程度、わかってくると、もっと知りたくなってきます。そうなってくると、
万人向けの書籍や入門サイトではお手上げです。
しかも、ブラウザーの種類やバージョンによって、まちまちなの物が多量にある
のに気づかれると思います。
そうなってくると、使ってるブラウザー(Ff、IE)で、No.4さんみたいに列挙してみたり
して、ネットで調べます。
Firefoxは、
https://developer.mozilla.org/en/Gecko_DOM_Refer …
が原点で、結構調べやすいです。
IEは、MSDN技術資料↓
http://msdn.microsoft.com/ja-jp/library/bb905071 …
が原点ですが、ここを弄るのはたいへんなので、Google検索した方が早いです。
GoogleChromeやサファリ、オペラはとりあえず無視です。
たまにW3Cも見ます。
http://www.w3.org/TR/DOM-Level-2-HTML/def-index. …
ここは索引から探すのが早いです。
javascript自体のおおもとは、ECMAの標準ですが、
ほとんど見ないですね。それよりブラウザーに実装されている
javascript仕様やHTML/CSS/DOM仕様の方が重要ですね。
No.4
- 回答日時:
こんな風にするとプロパティを探すことはできます
<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
- 回答日時:
私は必ずリファレンス本を手元に置いています。
使いたい機能を探す時、初めて使うエレメントやプロパティを調べるには必須です。
もちろん、ネットにもリファレンスサイトがあるのでそれも活用しています。
ただ、サイトの場合、更新があまりされないことが多いので、情報が古かったり足りないことがあります。
最新の書籍を購入するようにしています。
<textarea>って、HTMLで勉強したときは、valueは使わずにタグの間に初期値を書きますから、ついうっかりはしそうですね。
No.2
- 回答日時:
見つけているというよりも、そういう「共通項」が有る事を知っているかそういう資料を持っているんじゃないかな。
実際、htmlのid属性やstyle属性は共通で、どこにでもでてくるよね。
あとはまぁ こういうの(これはDOM1だけど)
http://www.doraneko.org/misc/dom10/19981001/cove …
ブラウザ毎の細かい違いは別途それぞれの開発のサイトとかを漁ると出てくるよ。
No.1
- 回答日時:
>知らない人は.valueすら想像できません。
>皆さんは、どのようにしてプロパティを見つけているのでしょうか?
これは、そもそもあなたがどのように勉強したかですね。独学か、町のパソコン教室でしょうか?
もし、ちゃんとした学校や、プログラムを学習した人ならこのような質問にはならないでしょう。
基本的にプログラムは、決まりごとなので、言語ごとに「仕様書」とか「リファレンス」とか定義している機関や教則本があります。HTML及びDOMも例外ではありません。HTML&DOM&CSSはW3Cのサイトにしっかりと定義文(仕様書)が記載されています。これは英語サイトなので、日本語に翻訳したサイトもあります。
ただ、このサイトは仕様書がのっているので、学習するのには適しません。しかし、どのようなプロパティがあるとか、メソッドがあるかはわかりますね。
初心者が見るのなら、本屋や図書館でHTML&JavaScriptの教則本を買ってください。
もちろんネット上でも公開されています。
"HTML リファレンス"
"リファレンス HTML"
で検索してみてください。自分で一番見やすいリファレンスサイトを探してください。最近はHTMLもバージョン5が出たので、それぞれのサイトで更新がかかっています。
つまり、回答は「リファレンスを見る」です。
あと、HTML&DOMはブラウザにより対応の仕方が違います。何のブラウザが何のDOMやメソッドに対応しているか一覧になっている、本やサイトがいいです。これを意識しないで、サンプルを記載している人がいますが、素人でしょう。
C言語やC++、Javaを習得した人なら、リファレンスを見るだけで、だいたいわかってしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イラストレーター、縦中横のシ...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
【Google Apps Script】「ライ...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
-
このプログラムに王様の逃げ道...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
Webページ中の javascript をVB...
-
Shell.ApplicationでのIEオブ...
-
エクセル2010のvbaについて
-
イベントevt?evt.target:event....
-
フォルダ内のファイル名を取得...
-
タブブラウザで focus() を実...
-
evtとは
-
event.srcElementの動的設定
-
jQuery for内にある配列の後の...
-
画面間でのJavaScrip...
-
チェックボックスを認識・不認...
-
JavaScriptで複数のプロパティ...
-
Dateオブジェクトの大小比較の...
-
for...inのプロパティ取り出し...
-
CSSのクラスを動的に変更 classで
-
javaScriptでグローバル変数に...
-
イベントリスナに登録される fu...
-
IEでDOMインターフェースを拡張...
-
文字を移動させその位置を表示...
おすすめ情報