innerHTMLにて設定した情報を再度取得する事は可能でしょうか？

解決済

質問者：takeya4649
質問日時：2009/10/23 12:10
回答数：4件

innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？

下記のコードを考えてみたのですが、
再取得出来ません。
環境はXPでIE6とFF3です。

ご教授よろしくお願いします。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>DOM情報の再取得</title>

<script type="text/javascript" language="JavaScript">

</script>

</head>
<body>
<div id="test1"></div>
<div id="test2">　</div>
<div id="test3">テスト3</div>
<br>
<a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a>
<a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a>
<a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a>

<script type="text/javascript" language="JavaScript">

</script>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： think49
回答日時：2009/10/23 23:02

多分、プログラムの実行順に誤解があるのではないでしょうか？

> document.write("<br><br>\n"+'再取得'+"<br><br>\n");
document.write は呼び出された時点で即実行します。
つまり、一番初めに実行されるコードです。

> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a>
onClick= は「ユーザがクリックするまで実行されない」ので、document.write より遅れて実行されます。

なので、あえて再取得という言い方を取るなら、onclickで実行される setText1() が再取得となります。

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2009/10/23 14:40

もしかして、やりたかったのは

こういう事ですか？（例によって、過去の他人の解答を勝手に使ってます。）
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
<div id="test1">始め</div>
<div id="test2">始め</div>
<div id="test3">始め</div>
<br>
<a href="#" onClick="setText1('セットテスト1');return false;">1</a>
<a href="#" onClick="setText2('セットテスト2');return false;">2</a>
<a href="#" onClick="setText3('セットテスト3');return false;">3</a>
<div id="kakidashi">
</div>
</body>

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
再度呼び出さないとダメだという事ですね。
使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？

通報する

お礼日時：2009/10/23 22:39

No.2

回答者： fujillin
回答日時：2009/10/23 14:27

質問内容がよくわかりませんが…

＞//エラーになるのでコメントアウト
あたりから想像して少しだけ説明を…

スクリプトが実行されるタイミングとして、ソースを読込んでいくときに各functionの内容は実行はされません。（onClickで実行される）
ソースの終わりのほうのdocument.write～以下は、読込み時に実行されます。まず、リンク要素の後に「再取得」のテキストなどが付け加えられます。
次のdocument.write～でtest1～test3の内容を表示していますが、スクリプトが実行されるとき（=初期状態）の各divのtextNodeが評価されて「js_test3=テスト3」のような文字列が作成され、ソースに追加されることになります。

結果的に、最初に表示されるソースは初期状態の内容そのまま。（test1の.childNodes[0].nodeValueがエラーになるのは、最初には子要素が無いのでエラーになっているのでしょう）

この後、ユーザがリンクをクリックすると対応するfunctionが実行されます。
これによって対応するdiv内のtextNodeが書き換えられます。（それで終り）
下のほうの「js_test3=テスト3」などのテキストは、操作されていないので当然そのままです。もしも、変えたければ、function内でそこも書き替えてあげる必要があります。

値の取得なども含め、あとは#1様がご提示なさっている通りです。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
再度呼び出さないとダメだという事ですね。
使用する度にinnerHTMLにて設定する必要があるという感じでしょうか？

通報する

お礼日時：2009/10/23 22:39

No.1

回答者： yambejp
回答日時：2009/10/23 12:21

＞再取得出来ません。

の意味がわからないのですが・・・
普通に取得できますよね？
（もしかして、変更したときに自動でdocument.writeのところに
反映できるという勘違い？？）

<script>
function setText1(data){
document.getElementById("test1").innerHTML = data;
return false;
}
function setText2(data){
document.getElementById("test2").innerHTML = data;
return false;
}
function setText3(data){
document.getElementById("test3").innerHTML = data;
return false;
}
function kakunin(){
alert("test1='"+document.getElementById("test1").innerHTML+"'");
alert("test2='"+document.getElementById("test2").innerHTML+"'");
alert("test3='"+document.getElementById("test3").innerHTML+"'");
}
</script>

<div id="test1"></div>
<div id="test2">　</div>
<div id="test3">テスト3</div>
<br>
<a href="#" onClick="return setText1('セットテスト1');">1</a>
<a href="#" onClick="return setText2('セットテスト2');">2</a>
<a href="#" onClick="return setText3('セットテスト3');">3</a>
<input type="button" value="確認" onclick="kakunin()">

<script>
document.write("<br><br>\n"+'再取得'+"<br><br>\n");
//document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");
document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n");
document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n");

</script>