以下のような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で質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selectの中身をfor文で入れる
-
ラジオボタンとドロップダウン...
-
セレクトの値を取得できない
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
html selectの内容を初期値に戻す
-
jQuery セレクトボックスで選択...
-
【javascript・PHP】プルダウン...
-
onchange等のイベントハンドラ...
-
JavaScriptでプルダウンのサイ...
-
INPUTで入力された値やSELECTで...
-
リストボックスの項目の順番を...
-
CSVファイルを読みこみ、プルダ...
-
IE以外のブラウザで対応するには
-
JQuery selectが反映されない
-
セレクトを全て選択されていな...
-
javascriptでの2つのプルダウン...
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
【jQuery】input nameの文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
セレクトの値を取得できない
-
リストボックスの項目の順番を...
-
onchange等のイベントハンドラ...
-
テーブルにおける行(セルにプル...
-
onFocusOutが複数回呼ばれる!
-
javascriptでプルダウンメニュ...
-
ブラウザの戻るボタンを押した...
-
<textarea>にプルダウンを表示...
-
javascriptでの2つのプルダウン...
-
selectタグに直接onChangeを書...
-
window.openで新しいタブが開か...
おすすめ情報