[Javascript] 任意エレメントから上位階層を検索するスニペット

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページでHTMLのエレメントの下位層を検索する方法はたくさん関数が存在していますが、上位検索を行う関数は基本的にはありません。
parentNodeやparentElementなどで、個別に1階層ごと検索しなければいけません。
 

そんな時に便利な関数(スニペット)をいくつかパターンで用意したので、ライブラリとしてお使いください。

どんな時に使うの?

ケース1

ページ内のウィジェットなどの中にある要素をクリックした際などに、ウィジェットの基準階層を選択する時。

ケース2

ブログや、掲示板記事で、内容を選択した際に、そのレコードの一番親にあたる部分を選択する時。

ケース3

入力フォームで、任意の入力項目から、その項目が含まれるformタグを検索する時。

ソースコード

class検索

id検索

selector検索

使い方

サンプルHTML

実行テスト

以下の様にイベントをセット

click1をクリックすると

下記の文字列(要素)が返ります。

解説と注意点

今回3つのソースを書いたのは、いくつか注意点があり、使用用途に応じて書き換えて使って欲しいためです。
 

ポイントは、selectorはIEでは”matches”が動かないので、class検索とid検索のようなindexOfを使った書き方で書かなければいけません。
 

スマートフォンであれば、問題なく使えると思いますが、1点だけ注意すると、ブラウザの古いバージョンでは、いくつかの関数が未対応のものもあるので、下位互換を持たせる書き方に直さないといけない場合もありますが、その辺はサイトポリシーに準拠でいいかと思いますので、「最新のみ」という互換性でいいのであれば、これでOK。
 

この3つのソースコードは、それぞれ同じフローで行なっており、
1. 対象エレメントの上位を1階層ずつ検索
2. 親階層の属性値をチェック
3. マッチする親要素に到達すれば、その時点で対象の親要素をreturn。

[余談] 子階層検索手段

とりあえず、この記事は親要素検索ですが、子要素の検索は下記のような関数が用意されているので、便利にお使いください。
 

getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
querySelector

 

他にもあったかなあ???
そういや、こういうデフォルト関数のように、要素のprototypeに入れ込むライブラリにした方がいいかもしれないなあ・・・と思った。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です