jQuery Academy · レッスン

効率的なDOMトラバーサル技法

.closest()、.siblings()、.find()、.parentsUntil()などのメソッドを使いこなし、DOMツリーを効率的に移動してパフォーマンスのボトルネックを回避します。

レッスン 3/311 ステップ

「効率的なDOMトラバーサル技法」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

DOMツリーをたどる

ようこそ。このレッスンでは、Document Object Model（DOM）内を効率的に移動するためのテクニックを習得します。

DOMは、Webページの要素を表す家系図のようなものです。DOMのたどり方を理解すると、IDやクラスを直接指定できない場合でも、要素を正確に選択できます。

Traverse: 横切ったり、通り抜けたりして移動すること。
DOM: HTML構造をブラウザー内部で表現したもの。

.find()で子孫要素を探す

.find()メソッドは、子孫要素を見つけるのに最適です。現在選択されている要素の*内部*を検索し、一致する要素を探します。

特定の箱の中から特定の品物を探すようなものだと考えてください。検索対象を絞り込むうえで非常に強力です。

構文: $(selector).find(filterSelector)
戻り値: 見つかった子孫要素を含む新しいjQueryオブジェクト。

.find()を実際に使う

特定の順序なしリスト（<ul>）内にあるすべてのリスト項目（<li>）を探してみましょう。

コードを実行して、どの項目の背景が緑色になるか確認してみてください。

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

.closest()で上位要素をたどる

要素の祖先要素（親、祖父母など）を見つけたい場合があります。.closest()メソッドは、そのためのメソッドです。

現在の要素から始めてDOMツリーを*上方向*にたどり、指定されたセレクターに一致する*最初の*祖先要素を返します。

構文: $(selector).closest(filterSelector)
戻り値: 最も近い祖先要素1つを含むjQueryオブジェクト。

.closest()を実際に使う

入れ子になった構造の奥にあるボタンをクリックするとします。そのボタンのメインコンテナを見つけたい場合、.closest()が最適です。

下のボタンをクリックして、最も近い<div>祖先要素を強調表示してみましょう。

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

.siblings()で兄弟要素を調べる

DOMツリー内で同じ階層にある要素を「兄弟要素」と呼びます。.siblings()メソッドを使うと、兄弟要素をすべて選択できます。

現在の要素と同じ親を持つすべての要素を探しますが、現在の要素自身は*除外*します。

構文: $(selector).siblings(filterSelector)
戻り値: すべての兄弟要素を含む新しいjQueryオブジェクト。

.siblings()を実際に使う

特定のリスト項目をクリックしたとき、その兄弟要素をすべて強調表示してみましょう。インタラクティブなリストやメニューに便利です。

任意のリスト項目をクリックして、兄弟要素の色が変わることを確認してください。

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

.parentsUntil()で上方向にたどる

複数の祖先要素を選択しつつ、特定の位置で止めたい場合はどうすればよいでしょうか。そのようなときに便利なのが.parentsUntil()です。

このメソッドはDOMツリーを上方向にたどり、指定したセレクターの要素に到達する*まで*、現在の要素の祖先要素をすべて選択します。「停止」する要素自身は含まれません。

構文: $(selector).parentsUntil(stopSelector, filterSelector)
戻り値: 選択された祖先要素を含むjQueryオブジェクト。

.parentsUntil()を実際に使う

深く入れ子になった構造があります。<span>のすべての親要素を、特定の<div class="container">に到達するまで選択してみましょう。

例を実行して、どの要素に枠線が付くか確認してください。ただし、「container」のdiv自体はスキップされることに注目しましょう。

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

クイックチェック

<img>要素が<div class="gallery-item">の中にあり、さらにその要素が<div class="gallery-row">の中にあるとします。<img>を選択した場合、<div class="gallery-item"> だけを取得するには、どのjQueryメソッドを使いますか。

対話的なレッスンで答える

まとめ: 効率的なDOMトラバーサル

よくできました。効率的なDOMトラバーサルに役立つ、jQueryの主要なメソッドを習得しました。

.find(): 要素の*内部*を検索して子孫要素を探します。
.closest(): ツリーを*上方向*にたどり、セレクターに一致する*最も近い祖先要素*を見つけます。
.siblings(): 現在の要素自身を除き、*同じ階層*にあるすべての要素を選択します。
.parentsUntil(): 指定した停止要素まで（停止要素自体は含めず）複数の祖先要素を選択します。

これらのメソッドを適切に使うと、動的なWebアプリケーション向けに、より正確で高パフォーマンス、かつ読みやすいjQueryコードを書けるようになります。

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「効率的なDOMトラバーサル技法」レッスンは無料ですか？

はい。「効率的なDOMトラバーサル技法」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「効率的なDOMトラバーサル技法」で何を学びますか？

.closest()、.siblings()、.find()、.parentsUntil()などのメソッドを使いこなし、DOMツリーを効率的に移動してパフォーマンスのボトルネックを回避します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「効率的なDOMトラバーサル技法」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る