Метод contains

Метод contains позволяет проверить, содержит ли один элемент внутри себя другой. Параметром метода передается элемент, который будет проверяться на то, что он находится внутри элемента, к которому применился метод.

Синтаксис

javascriptродитель.contains(элемент);

Пример

Проверим, находится ли абзац #child в блоке #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);

Результат выполнения кода:

javascripttrue

Пример

А теперь в родителе нет переданного элемента и поэтому метод возвращает 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);

Результат выполнения кода:

javascriptfalse

Пример

Можно передать тот же элемент, на котором метод был вызван, в этом случае метод также вернет true:

html<div id="parent"></div>
javascriptlet parent = document.querySelector('#parent');
let contains = parent.contains(parent);

console.log(contains);

Результат выполнения кода:

javascripttrue

Смотрите также

  • метод matches,
    который проверяет элемент по селектору
  • метод closest,
    который находит родителя по селектору