javascript styleにdisplay:noneが入ってるタグquerySelectorAllする方法

Question

display:noneが入ってるdivタグをquerySelectorAllで取得したいですが、うまくできませんでした。

<div data-layer="4" aria-live="polite" style="max-width: 300px; top: 328px; left: 318px; display: none;" class="ytp-tooltip ytp-bottom ytp-preview" aria-hidden="true"><div class="ytp-tooltip-bg" style="width: 158px; height: 90px; background: url(&quot;https://i9.ytimg.com/sb/A9YtHUr3FZc/storyboard3_L2/M1.jpg?sqp=ovOX_wMGCNi65-wF&amp;sigh=rs%24AOn4CLAc-obZUzy6Hx7cucsVs9dvXNqljQ&quot;) -160px -270px / 800px 450px;"><div class="ytp-tooltip-duration"></div></div><div class="ytp-tooltip-text-wrapper"><div class="ytp-tooltip-image"></div><div class="ytp-tooltip-title"></div><span class="ytp-tooltip-text">3:24</span></div></div>

上記のDOMの中でdiv classがytp-tooltipのDOMを取得したく

document.querySelectorAll('.ytp-tooltip[style="display:none"]');

このコマンドで試しましたが
なぜかnodeList.lengthが0となりした。

なにか間違ってる部分がありましたら教えていただけますでしょうか

※
今まではjqueryで$(".ytp-tooltip");
して普通に取得できましたが、jqueryだとdisplay指定しなくてもDOMを探してくれるんでしょうか。

Answer 1

querySelectorAllにおける、
属性セレクタはその指定の仕方だと文字列の完全一致でないと、マッチしないようです。
よって、下記ならばマッチするでしょう。
指定した文字列が一個でもマッチすれば取得できるという属性セレクタ指定の仕方がありますので、
こちらでいかがでしょうか。

const dom = document.querySelectorAll('.ytp-tooltip[style*="display: none;"]');

------ 下記元回答 ------

const dom = document.querySelectorAll('.ytp-tooltip[style="max-width: 300px; top: 328px; left: 318px; display: none;"]');

つまり、style属性の中の文字列が完全一致でようやっとマッチするわけです。

なので、別手法を使われるといいかと。

const dom = Array.from(document.querySelectorAll('.ytp-tooltip')).filter(val => val.style.display == 'none')[0];

NodeListを配列として扱った上で、filterで該当要素（インナースタイルにdisplay: noneが効いている要素）が入った配列を取得し、その0番目を取得、という形で、特定しています。

Comments

[kei344]

> 完全一致
「*=」とかもありますよ。

【属性セレクタ - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

[miyabi_pudding]

key344さん >
うお、ご指摘ありがとうございます。
回答修正します。

[Kimsehwa]

みごとできました！！大変助かりました。