質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

734閲覧

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

ypp

総合スコア66

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2022/11/24 16:54

とある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の比較について、もしくはオブジェクトについての比較をご存じの方は回答お願いします。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1 currentBody = documemt.body;

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

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

投稿2022/11/24 23:24

int32_t

総合スコア20533

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問