• ベストアンサー

JavascriptのDOMについて

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

  • bazax
  • お礼率5% (12/228)

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.8

下記サイトが真っ先に挙がると思っていましたが。 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 が定義・標準化されています。

その他の回答 (7)

  • think49
  • ベストアンサー率59% (285/482)
回答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%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

  • think49
  • ベストアンサー率59% (285/482)
回答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?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/ (文字数制限につき、次の記事に続きます。)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

＜皆さんは、どのようにしてプロパティを見つけているのでしょうか？＞ ・ちゃんとした学校や、ちゃんと学習したわけじゃありませんが、習った事は忘れる 　のが普通の人です。仕様毎に全てのリファレンスを暗記してる人なんていません。 　でも、基本的な部分とかは、しょっちゅう出てくるので、覚えていくし、類推の勘どころ 　もきくようになってきます。 　（まあ最初のうちは、わからなかったらリファレンスを見るの繰り返しです） ・ある程度、わかってくると、もっと知りたくなってきます。そうなってくると、 　万人向けの書籍や入門サイトではお手上げです。 　しかも、ブラウザーの種類やバージョンによって、まちまちなの物が多量にある　 　のに気づかれると思います。 そうなってくると、使ってるブラウザー（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仕様の方が重要ですね。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答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>

  • nine999
  • ベストアンサー率44% (512/1140)
回答No.3

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

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.2

見つけているというよりも、そういう「共通項」が有る事を知っているかそういう資料を持っているんじゃないかな。 実際、htmlのid属性やstyle属性は共通で、どこにでもでてくるよね。 あとはまぁ　こういうの(これはDOM1だけど) http://www.doraneko.org/misc/dom10/19981001/cover.html ブラウザ毎の細かい違いは別途それぞれの開発のサイトとかを漁ると出てくるよ。

  • 0909union
  • ベストアンサー率39% (325/818)
回答No.1

＞知らない人は.valueすら想像できません。 ＞皆さんは、どのようにしてプロパティを見つけているのでしょうか？ これは、そもそもあなたがどのように勉強したかですね。独学か、町のパソコン教室でしょうか？ もし、ちゃんとした学校や、プログラムを学習した人ならこのような質問にはならないでしょう。 基本的にプログラムは、決まりごとなので、言語ごとに「仕様書」とか「リファレンス」とか定義している機関や教則本があります。HTML及びDOMも例外ではありません。HTML＆DOM＆CSSはW3Cのサイトにしっかりと定義文（仕様書）が記載されています。これは英語サイトなので、日本語に翻訳したサイトもあります。 ただ、このサイトは仕様書がのっているので、学習するのには適しません。しかし、どのようなプロパティがあるとか、メソッドがあるかはわかりますね。 初心者が見るのなら、本屋や図書館でHTML＆JavaScriptの教則本を買ってください。 もちろんネット上でも公開されています。 "HTML　リファレンス" "リファレンス　HTML" で検索してみてください。自分で一番見やすいリファレンスサイトを探してください。最近はHTMLもバージョン５が出たので、それぞれのサイトで更新がかかっています。 つまり、回答は「リファレンスを見る」です。 あと、HTML＆DOMはブラウザにより対応の仕方が違います。何のブラウザが何のDOMやメソッドに対応しているか一覧になっている、本やサイトがいいです。これを意識しないで、サンプルを記載している人がいますが、素人でしょう。 C言語やC++、Javaを習得した人なら、リファレンスを見るだけで、だいたいわかってしまいます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptとDOM

    javascriptを勉強中なのですが、 javascript形式とDOM形式の両方で、タグの操作が出来ると事を知りました。 例)threeは、imgのid名です。 javascript：　書き方：document.three.src="画像ファイル"; DOM　：　書き方： document.getElementById('three').src="画像ファイル"; 質問1：一般的には、javascriptでタグを操作したりするとは、「DOM」「javascript」どちらの形式で javascriptを記述することが多いのでしょうか？ 質問2：現在、DOMのほうが扱いやすいのかなと思ってはいるのですが、DOMの参考書を購入しようと考えた際、どのような参考書を買えばいいでしょうか。javascriptで使用することを考えています。 どなたかご教授いただけましたら幸いです。 よろしくお願いします。

  • javascript DOM

    javascript DOMについて DOMはドキュメントオブジェクトモデルの略だと思いますが、DOMそのものというのはブラウザ画面に映っているオブジェクトそのものという解釈で良いのでしょうか？ というのもjavascriptには「document.write()」というメソッドがあると思いますがdocumentはブラウザ画面そのものを指していて、writeは書く。直訳するとブラウザ画面に書くになると思いますが DOMもdocumentはブラウザ画面、オブジェクトはブラウザに移っているオブジェクト（<input type="button">など）、モデルは良くわからないのですが HTMLの画面に映っているタグ自体はDOMと呼ぶのでしょうか？

  • JavaScriptのDOMでGoogle Ads

    JavaScriptのDOMでGoogle Adsenceコードを表示させたいです。 var test = document.getElementById("test"); var code='【Google Adsenceコード】'; test.innerHTML=code; が上手くいきません。 Google Adsenceコードの中に、<script type="text/javascript"><!-- などが入っているからでしょうか？ よろしくお願いいたします。 Google Adsenceコードの例。 <script type="text/javascript"><!-- google_ad_client = "ca-pub-11111111111111111"; /* test */ google_ad_slot = "11111111111111"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

  • DOMでdocument.writeを該当部分に書き入れる

    DOMで指定したエレメント内にdocument.write()で排出される文字を挿入する必要があり、実装方法に困っております……。 こんな感じです。 <div id="test"></div> <script type="text/javascript"> function func01() { document.write("<strong>書き込むデータ</strong>"); } document.getElementById("test").innerHTML = func01(); </script> これを実行しますと、当然かもしれませんが単に"書き込むデータ"がテキストでブラウザに表示されてしまい、指定したidであるtestのセクション内に出力されません。 func01()では制約上どうしてもdocument.write()を使用する必要があり、何とかこの値を<div id="test"></div>の中に書き込めないかなという状態です。 どなたかアドバイスをお願いできれば幸いです。

  • javascriptのDOMについてなんですが・・・

    閲覧有難うございます。 JavaScriptのDOMを用いてテキストボックスを生成しようと考えているのですがうまくいきません。 <form name="form" action="index2.php"> <select id="factor" onchange="swicthForm()"> <option value="0">選んでください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> </select> </form> <br> <script type="text/javascript"> function swicthForm(){ var options = document.form.factor.value; alert(options); } } </script> を用いてSELECTでいくらを選んだかが表示することが出来ました。 alert(options)の値の分だけテキストボックスなり何なりを生成したいのですがうまくいきません。 どの様にしたらテキストボックスなどを表示できますか？

  • javascriptに関して

    javascriptに関して document.getElementById("greeting").innerHTMLという一文があるのですが、 サンプルを書いても.innerHTMLの意味がよくわかりません・・。 サンプルコード内で.innerHTMLを抜いてしまった場合エラーが出てしまったので、 必須のプロパティであることは認識しているのですが、 このプロパティはどのようなものなのでしょうか？ ご存じの方がいらっしゃいましたらお願い致します。

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • javascriptのDOMについて

    こんにちは、早速ですがご質問させていただきます。 ・質問内容 <div id="contents">の子ノードである<div id="d1">を[alert(document.getElementById("contents").firstChild.nodeType);]で確認したところ、なぜか「３」と表示されました。nodeNameなどで確認しても「#text」と表示されてしまいます。 なにが原因なのでしょうか。 【javascriptの内容】*外部読み込み var Samp = { test : function () { alert(document.getElementById("contents").firstChild.nodeType); }, } 【htmlの内容】 <body> <div id="header"></div> <div id="contents"> <div id="d1"> 111 </div> <div id="d2"> 222 </div> <div id="d3"> 333 </div> <div id="d4"> 444 </div> </div> <div id="footer"> <button onClick="Samp.test()">onPress</button> </div> </body> 【環境】 OS:Mac OS X ブラウザ:Firefox 3.0 エディタ:Dreamweaver ご教授のほどヨロシクお願いいたします。

  • JavaScript DOMについて

    JavaScriptの勉強を始めて、１か月程度の初心者です。 JavaScriptを使って、計算したり、カレンダーを作ったり、 HTMLの要素の内容を変更させたり、削除したり、 スタイルシートのプロパティ？を変更して、背景色を変えたり、要素を移動したり、 イベントを使用したりと、出来ることは増えてきて、勉強するのが楽しくなってきたのですが、 いまだにDOM操作についていまいち理解できていません。 具体的にDOMとはどこからどこまでなんでしょうか？ JavaScriptに組み込まれているオブジェクト（Date,Math、String、Array） 以外のものは、すべてDOM操作と言う事でしょうか？ イベントハンドラだとか、タイマ機能？（windowオブジェクトのsetTimeout（）メソッド）なども DOMと言う事でしょうか？ どなたかわかりやすく説明してもらえると嬉しいです。

  • JavaScript Eventのタイミング

    Eventの挙動を学ぶために、簡単なスクリプトを作成しました。 テキストボックスに文字列を入れて、Submitボタンを押すと、 テキストボックスの下に(innerHTMLで)入力文字が表示され、 ボタン自体も入力文字になるというものです。 しかし、テキストに文字を入力し、Submitを押してもボタン・innerHTMLともに文字は変化しません。このままリロードをすると変化します。 挙動からして、マウスクリック自体は反応していないが、リロードによりイベントハンドラが動作しているように見受けられます。 イベントハンドラはonclickに代入しているためなぜこのようになるのか わかりません。 できるだけ、JavascriptとHTMLを分離したく外だしのファイルで 実現したいと思っています。 考え方、(比較的平易な)参考資料などありましたら教えていただけないでしょうか？ HTMLで<body onload="init()">として、JavaScriptでは以下のように記述しています。 function init(){ document.getElementById("button").click = change(); } function change(){ keyword = document.getElementById("keyword").value; document.getElementById("input").innerHTML = keyword; document.getElementById("button").value = keyword; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する