JavaScript 後から追加された要素がクリックできない

Question

JavaScript初心者です。

Chromeのコンソールから、ボタンをクリックしたいのですが、(jQuery無しで)
調べていると、後から追加された要素に対しては、.clickが効かないようです。

※実サイトではなくテスト用の画像です

document.querySelector('.button').click()
>undefined

難しいことではない？かなと思うのですが、抜け出せずにいます。
アドバイスいただけますと幸いです。

Comments

[maisumakun]

> 後から追加された要素に対しては、.clickが効かないようです。

それは、どのように判断しましたか？

[d04062]

いくつかのサイトに記述がありました。
例 https://begeeek.com/article/972/

また、そのサイト内でも、他のボタンは.clickが効くのですが、
アニメーション(おそらくjs？)で出てくるボタンに、.clickが効かないため、
そのように判断しました。

Answer 1

document.querySelector('.button')で取れるボタンは、このセレクタに合致するもののうち、並び順がDOMの最初にあるものだけです（MDN）。

あとから追加したかどうかにかかわらず、2つ目以降の.buttonはdocument.querySelector('.button').click()を実行しても何の影響もありません。

Comments

[maisumakun]

ボタンにイベントがセットされているかどうかと関係なく、「検証方法が正しくないかもしれない」という趣旨の回答です。

[d04062]

ありがとうございます。

>DOMの最初にあるものだけ
確かに失念していました。

ただ、どうやら今回は、「.buttonsView」という固有の1つだけしか存在しないクラス名で、

document.querySelector('.buttonsView')で取得できているようでした。

[d04062]

またChromeで、リロード後のDOMを見ていると、
そのクラス名が後から、追加されているようです。

[maisumakun]

> そのクラス名が後から、追加されているようです。

当然ながら、クラス名の追加前にquerySelectorを行ってもエレメントは取れません。

[d04062]

ありがとうございます。
順番を時系列にするとこんな形になっています

ブラウザロード途中 (クラス名が追加されていない)
↓
ブラウザロード完了 (クラス名が追加される)
↓
document.querySelector('.buttonsView')
> <div class="buttonsView" style="overflow: visible;">..</div>
↓
document.querySelector('.buttonsView').click()
> undefined

[maisumakun]

「undefined」と出るのは、clickが動作したかしないかに関係なく表示されますが、そこは大丈夫ですか？

[d04062]

また、getElementsByClassNameでも同様undefinedになってしまいました。

document.getElementsByClassName('buttonsView')[0]
> <div class=​"buttonsView" style=​"overflow:​ visible;​">​…​</div>​

document.getElementsByClassName('buttonsView')[0].click()
> undefined

[d04062]

>「uundefined」と出るのは、clickが動作したかしないかに関係なく表示されますが、そこは大丈夫ですか？

そうだったんですね、理解していませんでした。

そうすると、クリック出来たかどうか、どのように判定すればよいのでしょうか？
(手動でクリックすればページ遷移します、ページ遷移はしませんでした)

[d04062]

>「uundefined」と出るのは、clickが動作したかしないかに関係なく表示されますが、そこは大丈夫ですか？

そうだったんですね、理解していませんでした。

そうすると、クリック出来たかどうか、どのように判定すればよいのでしょうか？
(手動でクリックすればページ遷移します、ページ遷移はしませんでした)

[d04062]

もしかすると、そもそも私の認識に間違いがあるかもしれないと思いまして、
動画を撮りました。
https://youtube.com/shorts/H2BPiUQGO5E

・リロードすると、dvi.overlayViewと、その中にdiv.buttonsViewが後から追加されます。

・document.querySelector('.buttonsView')で取得はできるが、

・document.querySelector('.buttonsView').click()をしても何も発火しない

・手動で、dvi.overlayViewをクリックすると、イベントが発火する

といった流れです。

[maisumakun]

単にbuttonsViewは見た目だけで置いてあって、上から透明で被さるoverlayViewにイベントが仕掛けてある、という状況かもしれません。

（click()で動作させると、本当にそのボタンについてイベントを起こすので、「実際には上にかぶさったものがクリックされる」動作は再現できません）

[d04062]

ありがとうございます。
おっしゃるとおりでした。

[maisumakun]

余談ですが、「透明なiframeを使って別な表示でユーザーのクリックを誘い、本来ユーザーにしかできない操作を意図せずに行わせる」という、「クリックジャッキング」と呼ばれる攻撃手法もあります。

Answer 2

プログラムで作成されたものはコンソールからは普通に参照できるはずです

window.addEventListener('DOMContentLoaded', ()=>{
  const btn=document.createElement('button');
  btn.classList.add('button');
  btn.textContent="btn";
  btn.addEventListener('click',()=>{
    console.log('btn');
  });
  document.body.appendChild(btn);
});

上記でつくってあればコンソールから
document.querySelector('.button').click()
でクリックイベントが実行できます

Comments

[d04062]

ありがとうございます。

「自サイトに上記のコードを埋め込んであれば」ということ？かなと思うのですが、
ブラウザ自動操作で、他サイトのボタンをクリックしたいと思ってます。

(JavaScrip 全く初心者で認識間違っていたら、すみません)

[yambejp]

> 自サイトに上記のコードを埋め込んであれば

いえ、違います。命題が「後から追加された要素」と書いてあるので
それを想像して実装しただけです。
本来なら質問者さんが「後から追加」の部分を説明すべきでした

＞ 他サイトのボタンをクリック

他サイトでも同じです。
あとからボタンが追加されても参照時点でボタンがあるのであれば
イベントは利用可能です。

[d04062]

ありがとうございます。解決しました
透明のレイヤーだっため、押すことが出来ないようでした。