composedPath()で一気に遡る（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 11日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 11 日目 今日は event.composedPath() です。jQuery の parents() を思い出します。 Event.composedPath() – Web APIs | MDN デモ：https://codepen.io/ginpei/pen/ExwgeNd 基本的な使い方 イベントが発火した要素 event.target から順に要素のパス？の根本までの要素オブジェクトを配列で返します。 el.addEventListener('click', (event) => { console.log(event.composedPath()); // => [button, span#elButton, p, header, article, body, html, document, Windo
ノードと要素は別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 12日目） | Ginpen.com
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
ツリーを歩き回るならTreeWalkerはどうかな。（DOMおれおれAdvent Calendar 2015 – 14日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 14日目分 TreeWalkerというオブジェクトがあります。その名の通り、（DOMの）ツリーを歩き回るオブジェクトです。 例えばこんな構成。（インデント等によるテキストノードはないものとします。） div#root + div#el-1 + div#el-1-1 + div#el-1-1-1 あるノード(#root)を起点に、長子の子孫を巡り（#el-1→#el-1-1→#el-1-1-1）、また戻ってくる（#el-1-1→#el-1→#root）という処理が必要だとします。 普通に関連ノードを参照して移動していくコードはこんな感じです。 var origin = document.querySelector('#root'); var current = origin; // 子孫を巡る while (current.firs
el.closest()で直近の要素を探せるかもね。（DOMおれおれAdvent Calendar 2015 – 04日目） | Ginpen.com
元の要素から上位（親とその親とそのまた親と……）の要素を走査して、セレクターに合致するものを返します。なければ null 。親だけじゃなくて元の要素自身も含みます。 ポリフィル 上位の要素を辿りながら .matches() で確認していけばよろしい。見つからない場合は null を返します。 function getClosest(el, selector) { var cur; for (cur=el; cur; cur=cur.parentElement) { if (cur.matches(selector)) { break; } } return cur; } ちなみに document は要素じゃないから対象外です。なので parentNode ではなく parentElement で辿る。 環境 IEでは未実装。 Androidも未実装。Android版Chromeでは実装済
jQuery親要素、子要素、兄弟要素取得のまとめ
※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。 条件を入れると、条件にあったものだけが取得されるようになります。 例：$(elem).parent("div.class-name, #id"); 通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法 ■親要素の取得 □parent([条件]) 親要素の取得。 すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。 $(elem).parent("div"); 親要素がdivだったら親要素が取得できる。divじゃなければ空。 □parents([条件]) parent()と違い親より上の先祖要素までさかのぼる。 $(elem).parents(".class-name"); class-nameというクラス名がついた先祖要素のみ取得 □clos
固定ページで子ページのリンクやタイトル、抜粋を一覧表示させるショートコード
固定ページで子ページを持つ親ページに使うショートコード。子ページを一覧表示させる。 出力されるマークアップは$outputの中身ですので変えたい場合はここを弄れば良いですね。
カテゴリリスト内での特定のカテゴリとその親の判断
MTQに、「カテゴリ一覧（メニュー）について」という質問があがっていました。 この質問に答えてみます。 1.カテゴリとその親の取得 ご質問の事例を実現するには、現在処理中のカテゴリと、その親のカテゴリとを、判断することが必要になります。 現在処理中のカテゴリについて、その一番上の親から、順に階層を下って、各階層のカテゴリを得るには、MTParentCategoriesタグを使います。 ご質問の例では、「現在処理中のカテゴリと、その親のカテゴリに、カレントを示すマークをつけたい」ということです。 そこで、ハッシュを使って、それらのカテゴリに印をつけるようにします。 ハッシュに「current_cat_ids」という名前を付けるとすると、この処理は以下のように書くことができます。 <mt:ParentCategories> <$mt:CategoryID setvar="cat_id"$> <
PHPでバッチ処理する際に便利なglob使いこなしテクニック:phpspot開発日誌
PHP Magic Function : glob() | PHP Code Base PHPでバッチ処理する際に便利なglob使いこなしテクニック。 globl("*.gif"); 等とすることで、同じディレクトリにある gif 拡張子のファイルを配列で受け取るなんていう便利な関数がありますが、その glob をもっと使いこなすテクニックが紹介されていましたのでご紹介。 階層的なファイルを探索 glob('pear/*/DB/*') のようにして、階層的にファイルを探索することが出来る 第二引数を活用 第二引数は個人的に使ったことなかったのですが、これはかなり便利そう glob("*.gif", 第二引数); GLOB_MARK: 返ってきたディレクトリの最後に / を付ける GLOB_NOSORT: ソートを行わない GLOB_NOCHECK: 検索パターンにマッチするファイルが見つか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blog.openmedialabo.net