[javascript][DOM]getElementByIdやremoveChildの戻り値と処理の結果

解決済

質問者：himajin100000
質問日時：2007/07/26 03:34
回答数：1件

以前から気になっていたけれど聞かなかったこと。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>QFUMEI テストケース1</title>
<script type="application/ecmascript">
function init(){
var hoge = document.getElementById("hoge");
var fuga = document.getElementById("fuga");

hoge.removeChild(fuga);
alert(fuga); // [object HTMLParagraphElement] ← nullではない

fuga = document.getElementById("fuga");
alert(fuga); // null
}
</script>
</head>
<body onload="init();">
<div id="hoge">
<p id="fuga">ほげ</p>
</div>
</body>
</html>

結局
fuga = getElementById("fuga")によって
何が代入されているのでしょう？

document上のp#fugaへの参照であれば
removeChildの直後
fuga = nullとなっていてもよさそうだなと思っているのですが・・・・。

hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： taloo
回答日時：2007/07/26 05:29

documentに入ってないだけで、メモリ内には残っています。

removeChildした後は、documentから参照出来るかどうか、という違いですね。

//removeChildとは全く逆のパターン、appendChild
var p=document.createElement('P');
p.id='foo';
var foo=p;
alert(foo); //[object]
foo=document.getElementById('foo');
alert(foo); //null
document.body.appendChild(p);
foo=document.getElementById('foo');
alert(foo); //[object]

> hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・
状況がちょっとわかりませんが、

<div><p></p></div>
と
<div>
<p></p>
</div>
の場合の、div.firstChildは違います。
２つめのは改行が入ってるので、firstChildは匿名のテキストノードになります。
ブラウザのバグかどうかまではわかりませんが。。。

hoge.removeChild(fuga);
hoge.firstChild.nodeValue='hoge';
document.body.appendChild(fuga);

とするとどうなります？

改行を入れてなかったらhoge.firstChildはnull（スクリプトエラー）になり、
改行を入れていると、最終的には

<div id="hoge">hoge</div>
<p id="fuga">ほげ</p>

となると思います。