JavaScriptの最も近い（）メソッドの実際のユースケース

JavaScriptの親ノードトラバーサルの課題にうんざりしていませんか？適切な祖先の要素を見つけることは、特に深くネストされている、または動的なHTML構造を使用すると難しい場合があります。 closest()メソッドがこのプロセスをどのように簡素化するかを調べてみましょう。

このHTMLスニペットを考えてみましょう：

<div data-id="123">
  私をクリックしてください
</div>

ボタンクリック後にdata-idを取得すると、 parentNodeを使用して簡単です。

 const button = document.queryselector（ "button"）;
button.addeventlistener（ "click"、（evt）=> {
  console.log（evt.target.parentnode.dataset.id）; //印刷「123」
}）;

ただし、このアプローチはより複雑なネストで失敗します。

<div data-id="123">
  <div>
    <h1 id="いくつかのタイトル">いくつかのタイトル</h1>
    <button>私をクリックしてください</button>
  </div>
</div>

parentNodeを複数回チェーンすることは、面倒で維持できません。ループwhile関係する古いソリューション：

関数getParentNode（el、tagname）{
  while（el && el.parentnode）{
    el = el.parentnode;
    if（el && el.tagname === tagname.touppercase（））{
      Elを返します。
    }
  }
  nullを返します。
}

機能的ですが、これは柔軟性があり、タグ名を超えたセレクターを処理しません。 jQueryの.closest()優れたソリューションを提供しましたが、単一の関数にライブラリを追加することはしばしば過剰になります。

Element.closest()を入力します

Native Element.closest()メソッドは、エレガントなソリューションを提供します。

 const button = document.queryselector（ "button"）;
console.log（button.closest（ "div"））; //を返します<div> 要素<p><code>closest()</code>提供されたセレクターに一致する先祖が見つかるまで、DOMを上向きに横断します。このセレクターは、有効なCSSセレクター：ID、class、属性、またはタグ名です。</p>
<pre class="brush:php;toolbar:false"> element.closest（ "＃my-id"）; //動作します
element.closest（ "。マイクラス"）; //動作します
element.closest（ "[data-id]"）; //動作します

一致する祖先が見つからない場合、 closest() nullを返します。これにより、条件付きチェックが簡単になります。

 const button = document.queryselector（ "button"）;
if（button.closest（ "。マイクラス"））{
  console.log（ "found！"）;
} それ以外 {
  console.log（ "not not not found！"）;
}

実世界のアプリケーション

1. ドロップダウン：ドロップダウンメニューの外側のクリックを検出して閉じる：

 // ...（イベント処理コード）...
if（！evt.target.closest（ "。メニュードロップダウン"））{
  //ドロップダウンを閉じます
}

2. 表：それらの行内のボタンと対話するときに、テーブルの行からデータ属性を取得します。

関数getUserid（ターゲット）{
  return target.closest（ "[data-userid]"）。dataset.userid;
}

3. React Tables：上記と同様ですが、反応コンポーネント内：

 function handleclick（evt）{
  const userid = evt.currenttarget.closest（ "[data-userid]"）。dataset.userid;
  // ...
}

4. モーダル：モーダルコンテンツの外側をクリックするときにモーダルを閉じる：

 // ...（イベント処理コード）...
if（！evt.target.closest（ "。モーダルインナー"））{
  //モーダルを閉じます
}

ブラウザのサポート

Element.closest()インターネットエクスプローラーの古いバージョンを除く、優れたブラウザサポートを楽しんでいます。これにより、ほとんどのプロジェクトにとって安全で信頼できる選択肢になります。

Element.closest() 、DOM階層をナビゲートする簡潔で効率的な方法を提供し、多くの一般的なシナリオで複雑なループまたは外部ライブラリの必要性を排除します。その汎用性と幅広いブラウザのサポートにより、JavaScript開発者にとって貴重なツールになります。