display:noneでない最初の要素のidを取得したいのですが、できません…

Question

Javascriptを用いて、[display:none]でない要素の中から一番最初の要素のidを取得したいと思っています。

<ul class="test">
<li id="1" style="display:none;">AAA</li>
<li id="2">BBB</li>
<li id="3">CCC</li>
</ul>

上記のコードの場合、

display:noneでない最初の要素のidは「2」になるのですが、これを取得することが出来ません。

display:noneの位置は変動するため、[liの2個目の要素のidを取得]といった方法ではなく、display:noneの箇所の変動に対応できる方法で記述したいと考えています。

【試したこと】

//取得できず
document.querySelector('.test li[style*="display: block;"]:first-child').id;
//取得できず
document.querySelector('.test li:first-child').filter(function() {return $(this).css('display') !== 'none';}).id;

・querySelector内で、条件を指定する
・filterを活用して、条件を指定する

という2通りの方法を見つけましたが、その条件で絞った中の_1番最初の要素_という記事が見つけれらず、解決できずにいます。
（記述の仕方がおかしいのかなといじってみましたが、なかなか出来ず…）

初歩的な質問かもしれませんが、ご存知の方いらっしゃいましたら、どうかヒントをいただけますと幸いです。
何卒よろしくお願いいたします。

Answer 1

querySelector() は "指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。" ので、first-childは不要です。

display: noneでないのであれば :not() がセレクターとしては有効です

document.querySelector('.test li:not([style*="display:none"])');

が、変更に弱いのでセレクターで指定するのではなくfilterしたほうがよいでしょう。
ところで前述の通り querySlector() は最初のElementにを返します（1個しか返しません）ので、filterをかけるには不適切です。filterは複数の中から必要なものを取り出すためのものです。

セレクターに一致する NodeList (複数のElement) を返すのは querySelectorAll() です。返ってくるのは NodeList であって Array ではなく、 filter() メソッドは持ち合わせていません。適宜Arrayに変換するなどして対応してください。

[...document.querySelectorAll('.test li')].filter(li => li.style.display !== 'none')[0];

Comments

[ekitabi]

分かりやすく説明してくださりありがとうございました！！！
おかげさまで、実現できました！！