ゲーム開発をするにあたり、display:noneの要素を除いた要素を取得する必要がありました。
色々と調べまして、実現出来ましたので記録しておこうと思います。
目次
実装のイメージ
このようなlist要素があったとします。
<ul class="sample">
<li id="1" style="display: none;">見えません</li>
<li id="2">見えます</li>
<li id="3">見えます</li>
<li id="4"style="display: none;">見えません</li>
<li id="5">見えます！</li>
</ul>
ここで、普通に最初の要素のidを取得すると、取得されるidは”１”になります。
しかし、見えない(display:none)の要素を除外して、最初の要素のidを取得すると、idは”2”になります。
今回は、後者の特定のCSSを除外して要素を取得する方法のご紹介です！
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ここにページの概要が入ります。">
<title>特定のcssを除外するプログラム</title>
<body>
<ul class="sample">
<li id="1" style="display:none;">見えません</li>
<li id="2">見えます</li>
<li id="3">見えます</li>
<li id="4"style="display:none;">見えません</li>
<li id="5">見えます！</li>
</ul>
<script>
//普通に最初の要素のidを取得する([0]で最初の要素取得)
id_0 = document.querySelectorAll('.sample li')[0].id;
console.log("display:noneを除外しない場合:"+id_0[0]);
//display:noneの要素を除外して取得する([0]で最初の要素取得)
id = [...document.querySelectorAll('.sample li')].filter(li => li.style.display !== 'none')[0].id;
console.log("display:noneを除外した場合:"+id[0]);
</script>
</body>
</html>解説
最初の要素を取得するだけであれば、querySelectorAllでなく、querySelectorでもOKです。
querySelectorは最初の要素を返すメソッドです。
//最初の要素を取得するだけなら下記の記述でもOK
id_1 = document.querySelector('.sample li:not([style*="display:none"])').id;
console.log(id_1);.filter
与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成するものです。
［注意事項］
querySelectorAllの戻り値は、Nodelistとなります。
filterは、本来Array型の中から、特定の条件を除く処理をします。
今回は、スプレッド構文（…）を用いて配列にしていますが、
上記の内容を一部書き換えて行う場合、エラーが発生することがあります。
その場合は、querySelectorAllの戻り値を一旦Array型にしてから、行うと直ることがあります。