JavaScript/DOM/Node/contains
Mit der Methode contains kann geprüft werden, ob ein Knoten Nachfahre eines anderen Knotens ist.
Syntax
Node.prototype.contains(otherNode)
| Writable | true |
| Enumerable | true |
| Configurable | true |
Beschreibung
Die Methode contains ermöglicht es, den Teilbaum mit dem Kontextobjekt als Wurzel nach einem anderen Knoten zu durchsuchen, welcher der Methode beim Aufruf als Argument übergeben wird. Dabei kann es sich auch um das Kontextobjekt selbst handeln, also das Objekt, auf dem die Methode aufgerufen wurde. – Oder anders formuliert, werden diejenigen Knoten nach dem übergebenen Objekt durchsucht, deren gemeinsamer Vorfahre das Kontextobjekt ist, ausgehend von diesem selbst.
<body>
<header>
<h1><code>Node.prototype.contains</code></h1>
</header>
<main>
<p id="summary">Checks whether a node is another node’s descendant.</p>
</main>
<script>
const [main, summary] = document.querySelectorAll('main, p');
console.log(main.contains(summary)); // true
</script>
</body>
In diesem Beispiel werden erst mit der Methode querySelectorAll ein Main-Element und ein Paragraph-Element aus der Objektrepräsentation des Dokuments selektiert und die erhaltenen Referenzen in Konstanten gespeichert. Im Anschluss wird mit der Methode contains geprüft, ob der Absatz ein Nachfahre von Main ist. Da p hier in main enthalten ist, wird von der Methode der boolesche Wert true in der Konsole ausgegeben.
compareDocumentPosition, welche grundsätzlich ebenfalls für die Prüfung verwendet werden kann, ob ein Knoten Nachfahre eines anderen Knotens ist, umfasst der Suchbereich der Methode contains auch das Objekt, auf dem die Methode aufgerufen wurde. Würde also analog zum Beispiel oben geprüft, ob das Element Body in sich selbst enthalten ist, dann wäre das Ergebnis der Prüfung ebenfalls true.
Ein etwas realistischeres Anwendungsbeispiel für die Methode contains wäre die Prüfung, ob ein Ereignis innerhalb oder außerhalb eines bestimmten Elementes erfolgt ist. Dies wird im Folgenden anhand des click-Ereignisses veranschaulicht, das unter Verwendung der Methode addEventListener auf dem Element Body überwacht wird. In einem Output-Element wird ausgegeben, ob innerhalb oder außerhalb des durch das Main-Element ausgezeichneten Hauptinhalts geklickt wurde.
<body>
<header>
<h1><code>Node.prototype.contains</code></h1>
</header>
<main>
<p id="summary">Checks whether a node is another node’s descendant.</p>
</main>
<output></output>
<script>
const [main, output] = document.querySelectorAll('main, output');
document.body.addEventListener('click', function({ target }) {
output.value = `click ${
main.contains(target) ? 'inside' : 'outside'
} main element`;
});
</script>
</body>
Hier werden zunächst wieder die nötigen Objektreferenzen in Konstanten hinterlegt, nämlich für das Element Main und für das Element Output, wobei die Methode querySelectorAll verwendet wird. Danach wird auf Body ein Eventhandler registriert. Wird nun irgendwo innerhalb von Body geklickt, dann wird mit contains geprüft, ob das in der Eigenschaft target des als Argument übergebenen Eventobjektes hinterlegte Zielelement ein Nachfahre des Main-Elementes ist oder nicht.
Spezifikation
W3C DOM 4.1 – contains
