documentオブジェクトの使い方について

前へ 次へ
このQ&Aのポイント
  • documentオブジェクトは、HTMLドキュメント内の要素や属性にアクセスするためのオブジェクトです。
  • documentオブジェクトを使用して、テキストエリアや画像などの要素の値を取得したり、変更したりすることができます。
  • しかし、テキストエリアや画像などの要素にアクセスする際には、その要素が存在しているかどうかを確認する必要があります。
回答を見る
  • ベストアンサー

documentオブジェクトについて

以下ページを作成しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テストページ</title> </head> <body> <h1>テストページ</h1> <p>筆記用具を3つ下に表示します。</p> <script type="text/javascript"> <!-- document.write("鉛筆,消しゴム,定規"); --> </script> <hr> <p>ボタンを押すと食べ物、飲み物を表示します</p> <p><input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶"></p> <p><textarea cols="40" rows="4" name="textarea1"></textarea></p> <hr> </body> </html> ==============↑ここまで 質問：documentオブジェクトの使い方がわからないのです。 検証：動作を調べようとして以下検証しました ・検証1 上記ソース最後部分の、 <input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶">を 押すことで、textareaに「米、パン、お茶」を表示したいのですが、 documentがついたままだと、エラーを吐き、documentを抜いた、「textarea1.value」で実行するとエラーにならないのです。 なぜ、documentがあるとエラーになるのでしょうか。 documentは、現在表示されているページの全体をさしている(キャンバスみたいなかんじで)と認識しています。 そのドキュメント上にtextarea1があるので、document.textarea1.valueはエラーにならないと踏んだのです。 ・検証2 次に、ドキュメント上にForm１をひとつ作成し、その中にテキストエリアを作成しました。 form1タグを付けたので、「document.form1.textarea1.value」と考え、実行したところ textare1の中に、文字が表示されエラーにはなりませんでした。 ・検証1と2より よって、documentは、formがないとエラーになるのかと考えました。 ●別項目学習中に しかし参考書の途中別項目で、「document.three.src="画像ファイル"」 と、documentの次の「three」はimgタグのnameなのですが、エラーがでず実行されました。 なぜ、 「document.three」というのがきてもエラーにならないのでしょう。 ・質問 「document.textarea1.value」と「document.three.src="画像ファイル"」では 何が違うのでしょうか。documnetの後ろに来てるものは、同じオブジェクトだと思うのですが。 テキストエリアタグと、imgタグで、documentの書き方が変わるのでしょうか。 どなたかお分かりの方がいらっしゃいましたら ご教授お願いします。

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

  • ベストアンサー
回答No.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へと進んでください。

ShiftTail
質問者

お礼

なるほど。HTMLとDOMの考え方をごっちゃにしてたみたいです。 なんとなく把握することは出来ました。 リンクもたくさん付けていただきありがとうございました。

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

関連するQ&A

  • textareaに文字列を追加する方法

    JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>

  • そのオブジェクトが存在しているかどうか

    p.htmを呼び出すと document.form0.sabmit が存在しなくてエラーになります もしＰＨＰでhtml生成していてそのhtml内で存在しないオブジェクトを使って何かをさせようとするとエラーになります document.form0.sabmitが存在するかどうかを判断して 存在しているれば document.form0.sabmit.focus() をするような記述はどうするのでしょうか? このサイトのPHPも同じようなエラーを発生しているようです p.htm: --------------------------------- <html> <head> <title>forward</title> <script type="text/javascript"> <!-- function FormFocus() { // document.form0.submit.focus(); document.form0.sabmit.focus(); } // --> </script> </head> <body onload="FormFocus()"> <form name="form0" method="post" action="q.htm"> <input type="submit" name="submit" value="push"/> </form> </html> --------------------------------- q.htm: --------------------------------- <html> <head> <title>backward</title> </head> <body> <form name="form0" method="post" action="p.htm"> <input type="submit" name="submit" value="push"/> </form> </html> ---------------------------------

  • ブログフォームが表示されない！

    いつも大変お世話になり誠にありがとうございます。 標記の件。 下記ソースコードで名前がform.phpです。 ブログフォームが表示されません。 どうすれば表示されるでしょうか？ ご回答のほど宜しくお願い申し上げます。 <body> <div class="v_line_fix"> <h1>Blog K・T</h1> <h2><a href="index.html">トップページ</a></h2> <h2>ブログフォーム</h2> <form action="blog_create.php" method=_POST> <p> ペンネーム: <input type="text" name="name" value=""></p> <p> タイトル: <input type="text" name="name" value=""></p> <p> カテゴリー: <input type="text" name="name" value=""></p> <p>ブログ本文: <textarea name="content" id="content" cols="50" rows="80"></textarea><br> <input type="submit" value="確認画面へ"> </form> </body>

    • ベストアンサー
    • PHP
  • HTMLの取得と解析について

    フォームのtextareaにHTMLを入力して、そこから必要なタグを取得したいのですが上手くいきません。 textareaの値は取得できています。 textareaの値からgetElementsByTagNameを使用してtableタグを取得しようとしているのでがエラーが出ます。 chromeによると Uncaught TypeError: Object ・・・・ has no method 'getElementsByTagName' 取得した値をgetElementsByTagNameにほり込むのが間違ってるような気もするのですが、良く分かりません。 テキストエリアに入力したHTMLをパースして、再利用する良い方法がありましたらご教授ください。 以下に現状のソースを書かせて頂きます --------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function test() { var org_src = document.form1.src.value; table = org_src.getElementsByTagName('table'); document.getElementById('test').innerHTML = org_src; } // --> </script> </head> <body> <p>自動出力</p> <form name="form1"> <p>テキストエリアにソースを張り付けて下さい</p> <p> <textarea id="src" rows="5" cols="30"> </textarea> </p> <p> <input type="button" value="実行" onClick="test()"> </p> </form> <div id="test"> </div> </body> </html> ---------------------------------------------------------------------

  • 要素の、プロパティ一覧を出力させる方法

    初学者ですが、宜しくお願いいたします。 JavaScriptのプロパティにどんなものがあり、実際設定されているのか？ から思い立ち、以下のソースを書いてみました。 <form> <textarea id="ta">てすと</textarea> </form> <script type="text/javascript"> //idの付いたオブジェクト毎に、プロパティ一覧を出力させる方法 var prop=document.getElementById("ta"); for(i in prop){ document.write(i+" = "+prop[i]+"<br>"); } </script> 上だと思惑通り上手く行きますが、 ボタンを押したときに、<p id="propatydata"></p>の位置に表示させる仕様に変えようと思い、以下のようにしてみました。 <form> <textarea id="na">てすと</textarea> <input type="button" id="kakunin" onclick="propatys('na');" value="要素のプロパティ一覧を出力" /> </form> <p id="propatydata"></p> <script type="text/javascript"> <!-- function propatys(id){ var props=document.getElementById(id); for(i in props){ document.write(i+" = "+props[i]+"<br>"); } } // --> </script> テンパリました。 chromeの検証で「Uncaught TypeError: Cannot convert object to primitive value」となります。 またページが丸ごと変更？されてしまうようです。IEでもfoxでも動作しない、またはページが丸ごと変更されてしまいます。 出来るだけ簡潔なソースにするため、「for～in」は使って書いた方が良いと思うのですが、英知をお持ちの方、ご教授お願い致します。

  • DOMによる、テキストエリアの内容の書き換え

    以下コードを記述し、test.htmlで保存しました。 「ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる」 と言うことを想定し、作成してみました。 ところが、ボタンをクリックしても、テキストエリアが書き換わりません。 elm[0].Valueでは、駄目なのでしょうか。 ボタンをクリックしたとき、関数までは動いていることは確認できたのですが。 (alertで確認済み) ご教授お願いします。 ==========以下内容====== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テキストエリア書き直し</title> </head> <body> <h1>テスト</h1> <p>テキストエリアの書き換え</p> <script type="text/javascript"> <!-- function syutoku(){ var elm=document.getElementsByName('textarea1'); elm[0].Value="書き直し"; //alert(elm[0]); } --> </script> <hr> <p>テキストエリアを書き直します。</p> <form name="form1"> <p><input type="button" value="ボタン" onClick="syutoku()"></p> <p><textarea cols="40" rows="4" name="textarea1"> テキスト書き直しエリア</textarea></p> </form> <hr> </body> </html>

  • 送信フォームの入力内容チェックについて

    送信フォームの入力内容チェックについて 送信フォーム作成の勉強をしています。 「必須項目未記入」と「半角英数以外の文字入力」を同時にチェックする方法をお聞きしたいです。 「必須項目未記入」と「半角英数以外の文字入力」の時に赤字で警告を表示させたいです。 「必須項目未記入」は赤字で警告が表示されるのですが、「半角英数以外の文字入力」の時は赤字で警告が表示されません。。。 素人で説明不足かもしれませんが、助言をいただきたいです。 よろしくお願いいたします。 （URL↓） http://www.photoiku.com/sample/form-sample.php （Javascript↓） <script type="text/javascript"> <!-- function formCheck(){ var flag = 0; if( document . Form1 . InputText1 . value . match ( /[^0-9a-zA-Z_]+/ ) ){ flag = 1; document . getElementById( 'notice-input-text-1' ) . style . display = "block"; }else{ document . getElementById( 'notice-input-text-1' ) . style . display = "none"; } if( document . Form1 . InputText1 . value == "" ){ flag = 1; document . getElementById( 'notice-input-text-1' ) . style . display = "block"; }else{ document . getElementById( 'notice-input-text-1' ) . style . display = "none"; } if( document . Form1 . Textarea1 . value == "" ){ flag = 1; document . getElementById( 'notice-textarea-1' ) . style . display = "block"; }else{ document . getElementById( 'notice-textarea-1' ) . style . display = "none"; } if( flag ){ window . alert( '入力内容に不備があります。' ); return false; }else{ return true; } } // --> </script> （html↓） <form name="Form1" method="post" action="#" onsubmit="return formCheck()"> <p>ID（必須）（半角英数）</p> <p id="notice-input-text-1" style="display: none; color: red;"> 【半角英数で入力されているか確認して下さい】</p> <p><input type="text" name="InputText1"></p> <p>コメント（必須）</p> <p id="notice-textarea-1" style="display: none; color: red;"> 【コメントを入力して下さい】</p> <p><textarea name="Textarea1" rows="5" cols="40"></textarea></p> <p><input type="submit" value="送信"></p> </form> 補足ですが、1つ目のif～elseのブロックと、2つ目のif～elseのブロックを入れ替えてもできませんでした。

  • テキストフォームの内容をページ内に表示する方法

    初めて質問します。 JavaScriptも初心者です。 初めてづくしで見苦しい点もあるかと思いますが、よろしくお願いします。 複数のテキスト入力欄に書き込まれた内容をページ内に表示したいと思い、下のようなコードを書いています。 ---------- <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- function output(){ document.write(document.forms[0].text1.value); document.write("<br>"); document.write(document.forms[0].text2.value); document.write("<br>"); } // --> </script> <form action="#" name="form1"> <input type="text" name="text1"> <input type="text" name="text2"> <input type="button" value="output" onclick="output()"> </form> </body> </html> ---------- forms[0]以降、forms[1]、forms[2]…と同様に続けたいと思ってこのようにしたのですが、 function output()内の3行目でつまってしまうようです。 入力欄オブジェクトの指定方法がまずいのかも、とも思うのですが… Statement on line 6: Cannot convert undefined or null to Object というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。

  • 確認ページが表示できない

    以下にフォームと確認ページ(CGI)があります。確認ページを表示すると「window.opener.documentはnullまたはオブジェクトではありません」という表示がでます。どこが問題でしょうか （フォーム） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フォーム</title> </head> <body> <form name="user" action="kakunin.cgi" method="post"> <p>メール　 <input name="mail" type="text" value="" size="30"> 　　　　　　　　　　　　　　　　 　　　 <input type="submit"" value="確認"> <input type="reset"" value="リセット"> </form> </td> <td width="148">&nbsp;</td> </tr> </table> </body> </html> ーーーー 確認ページ #! /usr/bin/perl print<<END; Content-type: text/html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head><title>確認</title> <script language="JavaScript1.1" type="text/javascript"><!-- var win; function fun(){ win=window.opener.document.all.user.mail.value; window.document.kuser.kmail.value=win; window.opener.close(); } //--> </script> </head> <body onLoad="fun();"> <form name="kuser"> <input TYPE="text" NAME="kmail" value =""> <p> <input name="button" type="submit" value="送信"> </p></form> </body> </html> END

    • ベストアンサー
    • CGI
  • ブログフォームが表示されない！

    いつも大変お世話になり誠にありがとうございます。 標記の件。 form.htmlだと表示はされます。 しかし、その後のインプットの表示がされません。 index.phpでOKだったのですが、ソースコードが 表示されるようになってしまいました。 index.phpのソースコードは下記です。 どこが間違っているのでしょうか？ ご回答のほど宜しくお願い申し上げます。 <?php if( $mode=='input'){ ?> <h2>ブログフォーム</h2> <form action="blog_create.php" method=_POST> <input type="text" name="address" value="" /> <input type="text" name="name" value="ペンネーム"/> <input type="text" name="title" value="タイトル"/> <input type="text" name="name" value="カテゴリー"/> 　 <textarea name="content" id="content" cols="50" rows="80">ブログ本文</textarea><br> <input type="submit" value="確認画面へ"> </form>

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する