document.bodyの比較はどのような仕組みになっているのか。

とあるtampermonkeyで実行できるユーザースクリプトを見たところ、
SPA(single page application)でのページ移動をdocument.bodyの比較で検知していました。
ソースは以下です。

js
1var currentBody;
2setInterval(() => {
3  if(currentBody != document.body) {
4    currentBody = documemt.body;
5    reInit();
6  }
7}, 1000);

しかし、document.bodyもオブジェクト。要素が追加されるとdocument.body.childrenの配列にも追加されcurrentBodyと不一致になるはずですが、なぜかtrueになり、ページを移動させるとfalseになりました。これの意味が分からず昼しか眠れません。どなたかdocument.bodyの比較について、もしくはオブジェクトについての比較をご存じの方は回答お願いします。

ちなみに該当のサイトはここ、ユーザースクリプトはここです。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1    currentBody = documemt.body;

この代入文が実行されたときに document.body が指すオブジェクトがコピーされるのではなく、currentBody と document.body の両方が一つのオブジェクトを指すようになります。!= は同一のオブジェクトではないことをチェックしています。

children の変更などで document.body の状態が変更されようと、オブジェクトそのものが作り直されるわけではないので関係ありません。

投稿2022/11/24 23:24

int32_t

総合スコア21929

ypp

2022/11/25 09:09 編集

オブジェクトを参照していることは理解できましたが全体的にまだ理解できません。。。仮にページ移動しても結局はcurrentBodyもdocument.bodyも同じになるのではないでしょうか？つまり、 <html> <head>~</head> <body>内容置換前</body> <- ここでdocument.body == currentBody </html> の状態でページ移動しても <html> <head>~</head> <body>内容置換後</body> <- ここでもdocument.body == currentBodyになるはず。。。 </html> とbodyの中身が変わっても結局はcurrentBodyも<body>内容置換後</body>となるのではないでしょうか？言葉足らずで申し訳ございません。

int32_t

2022/11/25 09:14

その SPA はページ移動相当の処理で <body> を入れ替えているのでしょう。たとえば、 document.body.innerHTML = '内容置換後'; とすると document.body のオブジェクトは変わりませんが、 document.documentElement.innerHTML = '<body>内容置換後</body>'; とすると document.body が新しいものに置き換わります。

ypp

2022/11/28 16:42

納得できました。ありがとうございます。

行動規範の内容に同意します