以下のようなHTMLで出力されるページにおいて入力された値を取得したいと思っております。
<div id="div1">
現在<input type="text" name="TXT1" id="TXT1" size="10">が入力されています。
<br>
現在<select size="1" name="SLCT1" id="SLCT1">
<option>項目1</option>
<option>項目2</option>
<option>項目3</option>
</select>が選択されています。
</div>
値を取得するには
v1 = document.getElementById("TXT1").value
で取得できるのはわかっているのですが
たとえば、TXT1に「文字列1」を入力し、SLCT1で「項目2」を選択している状態で、
"現在文字列1が入力されています。現在項目2が選択されています。" のようにDIV1の中に表示されている文字列全体を取得することはできるのでしょうか。
IEでinnerTEXT、FirefoxでtextContentを利用して取得を試みたのですが、うまくいきません。
何かいい方法があればご教授願えますでしょうか。
現在想定している状況ですと、DIVの中に配置されるINPUTやSELECTの数なども不定でして、それら要素のidも不定であります。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
divの子供ノードを取ってnodeValue != nullならnodeValue。
nodeValue == nullでそのノードのnodeNameがbr以外の時valueを参照し順番に足し算したら如何でしょうか。
記憶が曖昧ですがDOMにはchildrenがありますが、ELEMENT NODEしか取れないかもしれません。
もしそうなら下の方法でTEXT NODEも取れるようにすれば良いですね。
children(document.getElementById("div1"))
function children(e){
var childern = []
var o = e.childNodes
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){ children.push(o[i]) }
}
return childern
}
そうするとchildernには
childern[0].nodeName #text
childern[0].nodeValue 空白
実際の文字 \n
childern[1].nodeName #text
childern[1].nodeValue 現在
実際の文字 現在
childern[2].nodeName input(IEでは大文字で返しFirefoxでは小文字で返すと思いますのでnodeNameを比較する時はtoLowerCase()などで小文字か大文字に変えて比較すると良いかも知れません)
childern[2].nodeValue null
childern[2].value 入力された文字
childern[3] nodeName #text nodeValue が入力されています。 実際の文字 が入力されています。
childern[4] nodeName br nodeValue null
childern[5] nodeName #text nodeValue 空白 実際の文字 \n
childern[6] nodeName #text nodeValue 現在 実際の文字 現在
childern[7] nodeName select nodeValue null value 選択されている項目のvalue値
こんな感じになると思います。
\n,\r,\tはブラウザによって無視する場合も有りますが空白なので気にする必要はないと思います。
この回答への補足
早速のご回答ありがとうございます。
k506d467様のコードを差し込んでみました。しかし、思ったような結果が得られません。
childrenですがFirefoxでは3つ、IEでは1つしか取得できませんでした。なにかお気づきの点があれば、ご指摘いただければ幸いです。
コードを差し込んだ全HTMLをペーストいたします。(一部k506d467様のコードを改変しています)
<html><head>
<title>文字列取得テスト</title>
<script>
function getChildren(e){
var children = [];
var o = e.childNodes;
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){
children.push(o[i]);
alert(o[i].nodeName + "," + o[i].nodeValue); //値をalertで出力
}
}
return children;
}
</script>
</head>
<body>
<div id="div1">
<p>現在<select size="1" name="SELECTTAG">
<option>項目1</option>
<option>項目2</option>
<option>項目3</option>
</select>が選択されています。</p>
</div>
<br><br><a href="#" onclick="getChildren(document.getElementById('div1'));">getChildren</a>
</body>
</html>
すいません。
div1タグの中に間違ったものを貼り付けてしまっていました。
divの中の値を差し替えたのですが、どちらにしても、入力されたデータや、選択中の項目の内容はそのままでは取得することができませんでした。
ただ、nodeの要素をさらに解析すれば、入力されている値や、選択中の値を取得できるように思います。
指定したDIV要素の中のnodeを再帰的に調べていき、その中のINPUTやSELECTは入力されていたり、選択されている値を取得するようにしたいと思います。
ありがとうございました。
No.1
- 回答日時:
エレメントをdivタグで囲んでいる意図がいまいちよくわかりま
せんが、普通こういう場合は、FORMを使いますね。
だいいち、
v1 = document.getElementById("TXT1").value
はIE4では取得できませんし。
この回答への補足
ご回答ありがとうございます。
divで囲んでいるのは、INPUTタグ、SELECT以外のdivの中に存在する要素もJavascriptで取得したいと思っているからです。
FORMタグでは、INPUTタグ、SELECT以外の要素を送信することができないため、質問させていただいております。
皆様のアドバイスを元に関数を作りました。ありがとうございました。
バグ発見時の改良などは下記URLの私のブログにUPする予定です。
http://www.kabugraph.jp/blog/from2001/d/217
//##################################################################################
//innerTEXTやtextContentのようにオブジェクトの中に含まれる文字列を取得します。
//INPUTタグやSELECTタグも考慮して値を取得することが可能です。
//引数:取得したい要素(document.getElementById("id")のようにオブジェクトを指定してください。)
//戻り値:文字列
//##################################################################################
function innerTextEx(e){
var childrenStrings = [];
var tmp1;
var o = e.childNodes;
for(var i = 0;i < o.length;i++){
if(o[i].parentNode == e){
//alert(o[i].nodeName + "," + o[i].nodeValue);
if(o[i].nodeName == "#text" ){
//テキストなら
childrenStrings.push(o[i].nodeValue);
}else{
//その他のオブジェクトなら
//alert(o[i].nodeName + " " + o[i].type + " " + o[i].value);
switch(o[i].nodeName.toUpperCase()){
case "INPUT":
switch(o[i].type.toUpperCase()){
case "TEXT":
childrenStrings.push(o[i].value);
break;
case "CHECKBOX":
//無視
break;
case "RADIO":
//無視
break;
case "BUTTON":
childrenStrings.push(o[i].value);
break;
case "SUBMIT":
childrenStrings.push(o[i].value);
break;
case "HIDDEN":
//無視
break;
default:
break;
}
break;
case "TEXTAREA":
childrenStrings.push(o[i].value);
break;
case "SELECT":
childrenStrings.push(o[i].options[o[i].selectedIndex].text);
break;
default:
//要素の中を再帰処理
tmp1 = innerTextEx(o[i]);
childrenStrings.push(tmp1);
break;
}
}
}
}
return childrenStrings.join("");
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
onFocusOutが複数回呼ばれる!
-
リストボックスの項目の順番を...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
javascriptでselectボックスの<...
-
<textarea>にプルダウンを表示...
-
【javascript・PHP】プルダウン...
-
jQuery セレクトボックスで選択...
-
セレクトボックスの値から料金...
-
return trueとreturn falseの用...
-
特定<table>内の<td>の色を変える
-
value内に変数を入れたい
-
確認ダイアログの出し方(JavaS...
-
至急!GetElementById でtdの...
-
HTML中のTABLEのデータを抽出す...
-
ひ孫に当たるiframe から親ウイ...
-
XMLHttpRequestを利用してPHPへ...
-
innerHTML内では改行は禁止?
-
プルダウンで選択すると、DBの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
フォームのメニューリストを外...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
javascriptでselectボックスの<...
-
html selectの内容を初期値に戻す
-
ブラウザの戻るボタンを押した...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
プルダウンとテキストの連動
-
<textarea>にプルダウンを表示...
-
DBの値を利用して、3つの連動し...
-
UWSCのIE操作でプルダウンを選...
おすすめ情報