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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

Q&A

1回答

882閲覧

JS(chrome拡張機能)shadow-root内の要素をクリックしたい

AMK

総合スコア765

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

0グッド

1クリップ

投稿2023/03/06 13:46

編集2023/03/06 13:47

実現したいこと

#shadow-root(open)という要素内の<span part="pagination-nav-right" tabindex="0" class="nav item">をクリックさせたい。
イメージ説明

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

html

1<kat-pagination page="1" items-per-page="10" total-items="10000"> 2#shadow-root(open) 3<nav aria-label="ページ分割"> <span part="pagination-nav-left" tabindex="-1" class="nav item end"> <kat-icon class="nav__icon" name="chevron-left" aria-label="後ろに戻る"></kat-icon> </span> 4 <ul class="pages"> 5 <!----> 6 <li tabindex="0" class="item page" part="pagination-page-1" data-page="1" aria-current="true"> <span class="page__inner" aria-label="ページ 1"><!---->1<!----></span> </li> 7 <!----> 8 <li tabindex="0" class="item page" part="pagination-page-2" data-page="2"> <span class="page__inner" aria-label="ページ 2"><!---->2<!----></span> </li> 9 <!----> 10 <li tabindex="0" class="item page" part="pagination-page-3" data-page="3"> <span class="page__inner" aria-label="ページ 3"><!---->3<!----></span> </li> 11 <!----> 12 <li tabindex="0" class="item page" part="pagination-page-4" data-page="4"> <span class="page__inner" aria-label="ページ 4"><!---->4<!----></span> </li> 13 <!----> 14 <li tabindex="0" class="item page" part="pagination-page-5" data-page="5"> <span class="page__inner" aria-label="ページ 5"><!---->5<!----></span> </li> 15 <!----> 16 <li class="item ellipsis"><span class="page__inner">...</span></li> 17 <!----> 18 <li tabindex="0" class="item page" part="pagination-page-1000" data-page="1000"> <span class="page__inner" aria-label="ページ 1000"><!---->1000<!----></span> </li> 19 <!----> 20 </ul> <span part="pagination-nav-right" tabindex="0" class="nav item"> <kat-icon class="nav__icon" name="chevron-right" aria-label="前に進む"></kat-icon> </span> </nav> 21 22</kat-pagination>

試したこと

js

1//要素を取得できる 2const iconElements = $('#sc-content-container #myi-container .pagination-container section.pagination-component-wrapper kat-pagination'); 3//要素を取得できない 4const iconElements = $('#sc-content-container #myi-container .pagination-container section.pagination-component-wrapper kat-pagination nav');

1つ1つ要素が認識しているのか?調べて行きあと一歩のところでshadow-rootという私の知らない項目に当たってしまいました。

自分なりに調べて下記のコードを完成させたのですがクリックされませんでした。
どうすればクリックされるようになるのか?教えていただけると幸いです。

js

1// 要素を取得 2const paginationNavRight = document.querySelector('span[part="pagination-nav-right"]'); 3 4// シャドウルートを取得 5const shadow = paginationNavRight.shadowRoot; 6 7// シャドウルート内の要素を取得 8const katIcon = shadow.querySelector('kat-icon.nav__icon'); 9 10// 要素をクリック 11katIcon.click(); 12

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

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

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

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

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

guest

回答1

0

js

1const shadow = paginationNavRight.shadowRoot;

ここでpaginationNavRightnullなのでエラーが出ているはずです。エラーは必ず質問文に入れましょう。

#shadow-root の中は document.querySelector() では取得できないので、まずは <kat-pagenation> を得る必要があります。なので、

js

1const katPagination = document.querySelector( 2 '#myi-container .pagination-container ' + 3 'section.pagination-component-wrapper kat-pagination'); 4const shadow = paginationNavRight.shadowRoot; 5const katIcon = shadow.querySelector('kat-icon.nav__icon');

ではないでしょうか。

投稿2023/03/06 21:57

int32_t

総合スコア21207

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

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

AMK

2023/03/07 11:50

ご指摘ありがとうございます 早速コードを試してみましたが下記のエラーが出ました。 paginationNavRight is not defined コードを見たら paginationNavRight.shadowRoot;が赤の波下線でした。
AMK

2023/03/07 12:01

paginationNavRight.shadowRoot;を pagination-Nav-Right.shadowRoot;に変更しても同様の個所でエラー katPagination.shadowRoot;に変更して const katIcon = shadow.querySelector('kat-icon.nav__icon'); katIcon.click(); とするが、エラーもなくクリックもされない状況です。
int32_t

2023/03/07 13:00

おっとすみません、katPagination.shadowRoot ですね。 click() で反応しない理由は質問文からは不明です。そもそも click イベントで質問者さんの目的の処理を実行するように作られていないかもしれません。
AMK

2023/03/07 15:25

なるほど、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問