パターン（セレクター）に一致した要素をすべて取得
パターン（セレクター）に一致した要素をすべて取得するには、次のような方法で実装します。
- ※ element.matchesを使用していますので、IE8以下は対応していません。
- ※ element.matchesを古いブラウザで使用するには次のページを参照してください。
ある要素から指定するセレクタ―に一致するか判定
関数定義
JavaScript
/**
* パターンに一致した要素をすべて取得
* @param {NodeList|HTMLCollection|Element[]|Node[]} elems 検索する要素群
* @param {string} selector 検索パターン（セレクター）
* @return {Element[]} 見つかった要素を配列、見つからなかったら空の配列を返す
*/
var filterElements = function(elems, selector) {
if (typeof elems.length === 'undefined') return elems;
var results = [];
for (var i = 0, len = elems.length; i < len; i++) {
if (elems[i].matches(selector)) results.push(elems[i]);
}
return results;
};使い方
引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 | elems | NodeList | HTMLCollection | array | 検索する要素群 |
| 第二引数 必須 | selector | string | 検索パターン（セレクター） |
戻り値
見つかった要素を配列、見つからなかったら空の配列を返します。
サンプルコード
JavaScript
var sampleElems = document.getElementsByTagName('div');
var matchElems = filterElements(sampleElems, '.sample');
alert(matchElems.length);