- ベストアンサー
HTMLページでの値の取得方法について
- HTMLページでの値の取得方法について質問があります。
- 具体的には、divタグ内に配置されたinput要素やselect要素の値を取得したいと思っています。
- 現在、getElementByIdを使用して取得しようとしていますが、うまくいきません。
- from2001
- お礼率27% (8/29)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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はブラウザによって無視する場合も有りますが空白なので気にする必要はないと思います。
その他の回答 (1)
- VCAT
- ベストアンサー率20% (16/79)
エレメントをdivタグで囲んでいる意図がいまいちよくわかりま せんが、普通こういう場合は、ＦＯＲＭを使いますね。 だいいち、 v1 = document.getElementById("TXT1").value はIE4では取得できませんし。
お礼
皆様のアドバイスを元に関数を作りました。ありがとうございました。 バグ発見時の改良などは下記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(""); }
補足
ご回答ありがとうございます。 divで囲んでいるのは、INPUTタグ、SELECT以外のdivの中に存在する要素もJavascriptで取得したいと思っているからです。 FORMタグでは、INPUTタグ、SELECT以外の要素を送信することができないため、質問させていただいております。
お礼
すいません。 div1タグの中に間違ったものを貼り付けてしまっていました。 divの中の値を差し替えたのですが、どちらにしても、入力されたデータや、選択中の項目の内容はそのままでは取得することができませんでした。 ただ、nodeの要素をさらに解析すれば、入力されている値や、選択中の値を取得できるように思います。 指定したDIV要素の中のnodeを再帰的に調べていき、その中のINPUTやSELECTは入力されていたり、選択されている値を取得するようにしたいと思います。 ありがとうございました。
補足
早速のご回答ありがとうございます。 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>項目２</option> <option>項目３</option> </select>が選択されています。</p> </div> <br><br><a href="#" onclick="getChildren(document.getElementById('div1'));">getChildren</a> </body> </html>