getElementByIdメソッドを使用せずに要素の存在をどのようにテストしますか？
参考のためにライブデモをセットアップしました。ここにもコードを印刷します。
<!DOCTYPE html>
<html>
<head>
<script>
var getRandomID = function (size) {
var str = "",
i = 0,
chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
while (i < size) {
str += chars.substr(Math.floor(Math.random() * 62), 1);
i++;
}
return str;
},
isNull = function (element) {
var randomID = getRandomID(12),
savedID = (element.id)? element.id : null;
element.id = randomID;
var foundElm = document.getElementById(randomID);
element.removeAttribute('id');
if (savedID !== null) {
element.id = savedID;
}
return (foundElm) ? false : true;
};
window.onload = function () {
var image = document.getElementById("demo");
console.log('undefined', (typeof image === 'undefined') ? true : false); // false
console.log('null', (image === null) ? true : false); // false
console.log('find-by-id', isNull(image)); // false
image.parentNode.removeChild(image);
console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
console.log('null', (image === null) ? true : false); // false ~ should be true?
console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
};
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
基本的に上記のコードは、要素が変数に格納され、その後DOMから削除されることを示しています。要素がDOMから削除されていても、変数は最初に宣言されたときの要素を保持します。つまり、要素自体へのライブ参照ではなく、レプリカです。その結果、変数の値（要素）の存在を確認すると、予期しない結果が生じます。
このisNull関数は、変数から要素の存在を確認するための私の試みであり、機能しますが、同じ結果を達成する簡単な方法があるかどうか知りたいです。
PS：この話題に関連する優れた記事を誰かが知っている場合、JavaScript変数がこのように動作する理由にも興味があります。
18
実際、それは要素自体へのライブ参照であり、もはやドキュメントには存在しません。実際にDOMから要素を引き出し、後ですべてのイベントハンドラーなどを接続したまま元に戻すことができるため、この機能が必要です。なぜJS変数はそのように振る舞うのですか？彼らがそうしなかったらそれは信じられないほど迷惑になるでしょうから。JSは、変数への参照がなくなったときにのみ変数を削除します。この言語には、あなたが重要だと考える参照や、価値がないと考える参照を知る方法がありません。
—
Mark Kahn、
@cwolves興味深い。これまでに何度も遭遇したことがあり、あまり考えたことはありません。実際、現在のプロジェクトでは、変更を元に戻す場合に備えて、要素に変更を加える前に要素を配列に保存しています。
—
ジャスティンブル
ガベージコレクションは時々実行され、可能な限りすべてを削除します。ほとんどのブラウザーではかなりお粗末なようですが、一部のブラウザーは再起動の間に数日または数週間実行されることを開発者が認識しているため、ブラウザーのパフォーマンスには適切なガベージコレクションが不可欠です。Web開発者は、不要になったプロパティ（およびメモリ内のものへの参照）を削除することで支援できます。
—
RobG、2011
@JustinBullは、元に戻す要素のコピーを保存するときに注意してください。DOM要素を配列に格納する場合、コピーではなくDOM要素への参照が格納されるため、配列の要素を参照すると、DOM要素に加えられた変更が反映されます。これは、JavaScriptのすべてのオブジェクト（タイプ「オブジェクト」の変数）の場合です。
—
アンソニーディサンティ2011