Praktische Anwendungsfälle für die engste () -Methode von JavaScript ()

Müde von JavaScripts übergeordneten Knoten -Traversal -Herausforderungen? Das richtige Vorfahrelement zu finden, kann schwierig sein, insbesondere mit tief verschachtelten oder dynamischen HTML -Strukturen. Lassen Sie uns untersuchen, wie die methode closest() diesen Prozess vereinfacht.

Betrachten Sie diesen HTML -Snippet:

<div data-id="123">
  Klicken Sie auf mich
</div>

Das Erhalten des data-id nach einer Schaltfläche Klick ist einfach mit parentNode :

 const button = document.querySelector ("button");
Button.AdDeVentListener ("Click", (evt) => {
  console.log (evt.target.parentnode.dataset.id); // Drucke "123"
});

Dieser Ansatz schlägt jedoch mit komplexeren Verschachtelung fehl:

<div data-id="123">
  <div>
    <h1 id="Ein-gewisser-Titel">Ein gewisser Titel</h1>
    <button>Klicken Sie auf mich</button>
  </div>
</div>

Das mehrmalige Anketten parentNode ist umständlich und unbetentbar. Ältere Lösungen while der Schleifen:

 Funktion getParentnode (el, tagname) {
  while (el && el.parentnode) {
    el = el.Parentnode;
    if (el && el.tagname === tagname.touppercase ()) {
      return el;
    }
  }
  null zurückkehren;
}

Dies ist zwar funktionsfähig, ist jedoch unflexibel und handelt keine Selektoren über Tagennamen hinaus. JQuery's .closest() bot eine überlegene Lösung, aber das Hinzufügen einer Bibliothek für eine einzelne Funktion ist häufig übertrieben.

Element.closest() eingeben

Das native Element.closest() -Methode liefert eine elegante Lösung:

 const button = document.querySelector ("button");
console.log (button.closest ("div")); // gibt die zurück<div> Element<p> <code>closest()</code> durchquert den DOM nach oben, bis es einen Vorfahren findet, der dem bereitgestellten Selektor entspricht. Dieser Selektor kann ein gültiger CSS -Selektor sein: ID, Klasse, Attribut oder Tag -Name.</p>
<pre class="brush:php;toolbar:false"> element.closest ("#my-id"); // funktioniert
element.closest (". My-Class"); // funktioniert
element.closest ("[data-id]"); // funktioniert

Wenn kein passender Vorfahr gefunden wird, kehrt closest() null zurück. Dies erleichtert die bedingten Überprüfungen:

 const button = document.querySelector ("button");
if (button.closest (". My-Class")) {
  console.log ("Found!");
} anders {
  console.log ("Nicht gefunden!");
}

Anwendungen in der Praxis

1. Dropdowns: Klicks außerhalb eines Dropdown -Menüs erkennen, um es zu schließen:

 // ... (Ereignisbearbeitungscode) ...
if (! evt.target.closest (". Menü-Dropdown")) {
  // Schließen Sie die Dropdown
}

2. Tabellen: Datenattribute von Tabellenzeilen abrufen, wenn Sie mit Schaltflächen innerhalb dieser Zeilen interagieren:

 Funktion getUserid (Ziel) {
  return target.closest ("[data-userID]"). Dataset.userId;
}

3. React -Tabellen: Ähnlich wie oben, jedoch innerhalb einer React -Komponente:

 Funktion Handleclick (evt) {
  const userID = evt.currentTarget.closest ("[data-Userid]"). Dataset.userId;
  // ...
}

4. Modale: Modale schließen, wenn Sie außerhalb des modalen Inhalts klicken:

 // ... (Ereignisbearbeitungscode) ...
if (! evt.target.closest (". Modal-Inner")) {
  // das Modal schließen
}

Browserunterstützung

Element.closest() genießt einen hervorragenden Browser -Support, ausgenommen ältere Versionen von Internet Explorer. Dies macht es für die meisten Projekte zu einer sicheren und zuverlässigen Wahl.

Element.closest() bietet eine prägnante und effiziente Möglichkeit, die DOM -Hierarchie zu navigieren und die Notwendigkeit komplexer Schleifen oder externen Bibliotheken in vielen gemeinsamen Szenarien zu beseitigen. Die Vielseitigkeit und der breite Browser -Support machen es zu einem wertvollen Instrument für jeden JavaScript -Entwickler.