Il metodo contains

Il metodo contains permette di verificare se un elemento ne contiene un altro al suo interno. Il parametro del metodo è l'elemento che verrà verificato per stabilire se si trova all'interno dell'elemento a cui è stato applicato il metodo.

Sintassi

javascriptgenitore.contains(elemento);

Esempio

Verifichiamo se il paragrafo #child si trova nel blocco #parent:

html<div id="parent">
  <p id="child"></p>
</div>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

Risultato dell'esecuzione del codice:

javascripttrue

Esempio

Ora il genitore non contiene l'elemento passato e quindi il metodo restituisce false:

html<div id="parent"></div>
<p id="child"></p>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

Risultato dell'esecuzione del codice:

javascriptfalse

Esempio

Si può passare lo stesso elemento su cui è stato chiamato il metodo, in questo caso il metodo restituirà anch'esso true:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');
let contains = parent.contains(parent);

console.log(contains);

Risultato dell'esecuzione del codice:

javascripttrue

Vedi anche