JavaScriptを使用して可視要素のみを検索する

Question

JQueryプロジェクトを純粋なJavaScriptに変換する作業をしていますが、次のコードを使用しています。 blockがされている（

function functionName(){ 
    var elementsOnShow = document.getElementsByClassName('element-has-class').find(isVisible); 
} 

function isVisible(element) { 
    return element.style.display === 'block'; 
} 

：

$(".element-has-class:visible") 

は、私は、おそらくこれらの線に沿って何かが（私のプロジェクトのリスト項目の場合）すべての可視要素をキャッチするために働くかもしれないが、私は運がなかったてきたと思いましたCSSで設定します）。 1つの変数内にすべての可視要素を取得するための方法はありますか？

Answer 1

あなたが目に見える要素を取得するためにArray.prototype.filter()を使用できるようになりますアレイ（read more about it here）のために、nodelistとを変換することができます：

function functionName(){ 
    var myNodeList = document.getElementsByClassName('element-has-class'), 
     myArray = [].slice.call(myNodeList), 
     elementsOnShow = myArray.filter(isVisible); 
} 

function isVisible(element) { 
    return element.offsetWidth > 0 
     || element.offsetHeight > 0 
     || element.getClientRects().length > 0; 
} 

あなたは上記を参照isVisible関数はjQueryの2.2.4のソースから抽出されますコード（バージョン3.XXはIE 8以降と互換性がありません）。