- ベストアンサー
documentオブジェクトの使い方について
- documentオブジェクトは、HTMLドキュメント内の要素や属性にアクセスするためのオブジェクトです。
- documentオブジェクトを使用して、テキストエリアや画像などの要素の値を取得したり、変更したりすることができます。
- しかし、テキストエリアや画像などの要素にアクセスする際には、その要素が存在しているかどうかを確認する必要があります。
- ShiftTail
- お礼率80% (423/528)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞なぜ、documentがあるとエラーになるのでしょうか それは、あなたが、HTMLのツリー構造を正確に理解していないからです。DOMと言い換えてもいい。JavaScriptは、HTMLツリーに対して、２つのやり方を提供している。 つまり、HTMLオブジェクトとしてと、DOMとしてXML的な使い方が、後から追加されている。例えば、FORMタグだと、初期の段階から、 forms と言うオブジェクトを、documentオブジェクトの配下に提供している。なのでdocument.forms[0]. でそれ以下の下位オブジェクトにアクセスできる。 これをDOMからアクセスすると、document.getElementByTagName(form) なんて感じになる。ここで、documentの下にどっとでつながる物とは何か？ と言うことに気がついてほしい。これがオブジェクト指向のプログラミングです。 （）が付く場合は、ほとんど、そのオブジェクトに対する、メソッドです。 []は配列又はコンストラクラーで、コレクションを表す場合は（）を使う場合もある（IEで）。 では何もない場合は、DOMなどのツリー構造のオブジェクトを意味しています。 ツリー構造 http://www.kanzaki.com/docs/html/element-tree.html DOM http://piyo-js.com/05/dom.html http://www.pori2.net/js/DOM/1.html https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference で本題です。 上記のツリー構造をみると、 documentの下はHTMLですが、通常HTML自体がdocumentなので、省略されます、よって document.body の下に実際にはみなさん、タグを書いていると思います。bodyをつけてやってみてください。 それ以下の質問ですが、全部上記に記載しています。現在、最初にHTMLオブジェクトの勉強を始めると、歴史を理解しないでサンプルだけみて、できた、できなかったと、喜んだりしていますが、ちゃんと歴史を勉強すれば理解できることです。 HTMLオブジェクトにアクセスするために、最初にJavaScript側で、特別にオブジェクトを作って、簡単にアクセスできる方法を提供しました。それが documentの配下にある、forms とimg が配列となっているものです。 そのことと、HTMLのツリー構造を、ごっちゃにして捕らえてしまう方が結構多いです。HTMLのツリー構造で、ID名で記載できるのはIEのみです。また、JavaScriptのバージョンによっても違います。 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference#.E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E3.83.BB.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88 https://developer.mozilla.org/ja/The_DOM_and_JavaScript ここにでてこないオブジェクトは、HTMLオブジェクトです。なので、HTML4.01, 5 などの規約にしたがいます。 http://msdn.microsoft.com/en-us/library/windows/apps/yek4tbz0(v=VS.94).aspx （IE用） http://msdn.microsoft.com/en-us/library/windows/apps/br229576.aspx http://msdn.microsoft.com/en-us/library/windows/apps/br212882.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh689057.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh689109.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh453143.aspx （DOMから見た documentオブジェクトのメソッド、プロパティ、イベント） そう、あなたの場合、HTMLのツリー構造と、JavaScriptから見たDOMの構造を、混同してしまって霧の中にはいってしまったのです。さらにIEで、できるID指定が、さらに混沌とさせてしまっているようです。 HTMLのツリー構造を理解し、飲み込んだら、 http://www.htmq.com/js/index.shtml を見て一般的なJavaScriptのオブジェクトモデルを理解しましょう。そこからDOMへと進んでください。
お礼
なるほど。HTMLとDOMの考え方をごっちゃにしてたみたいです。 なんとなく把握することは出来ました。 リンクもたくさん付けていただきありがとうございました。