JS метод Element.contains()

Загальний опис

Метод contains() є властивістю об'єкта Element у JavaScript, яка використовується для перевірки того, чи містить даний елемент вказаний елемент в якості свого нащадка. Основна суть методу полягає в тому, що він дозволяє легко перевіряти, чи є певний елемент дочірнім для іншого елемента в DOM-структурі, що може бути корисним у різних сценаріях веб-розробки.

Одним з основних випадків використання методу contains() є перевірка, чи містить даний батьківський елемент певний елемент в якості свого нащадка. Наприклад:

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

if (parentElement.contains(childElement)) {
    console.log('childElement є нащадком parentElement');
} else {
    console.log('childElement не є нащадком parentElement');
}

У цьому прикладі ми перевіряємо, чи є childElement нащадком parentElement, використовуючи метод contains(). Якщо contains() повертає true, це означає, що childElement є нащадком parentElement.

Крім того, метод contains() може бути корисним для перевірки, чи містить документ певний елемент в якості свого нащадка. Наприклад:

const bodyElement = document.body;
const targetElement = document.getElementById('target');

if (bodyElement.contains(targetElement)) {
    console.log('Документ містить цей елемент');
} else {
    console.log('Документ не містить цей елемент');
}

У цьому прикладі ми перевіряємо, чи містить документ елемент з id target в якості свого нащадка, використовуючи метод contains().

Загалом, метод contains() є корисним інструментом для перевірки належності елементів в DOM-структурі. Він дозволяє легко визначати, чи є один елемент дочірнім для іншого, що робить його корисним у великому спектрі сценаріїв веб-розробки.

Порада:	Початківцям важливо зрозуміти, що метод `contains()` дозволяє перевіряти, чи містить один елемент інший елемент у собі. Для використання цього методу потрібно знати, що він повертає значення типу `Boolean`, тобто `true`, якщо елемент міститься, і `false` - якщо ні.
Порада:	Досвідченим програмістам варто пам'ятати, що метод `contains()` може бути корисним при роботі з подіями або при необхідності перевірити, чи міститься певний елемент у контейнері перед виконанням певної дії. Наприклад, перевірка перед видаленням елемента з DOM.
Порада:	Для початківців важливо вивчити синтаксис методу `contains()` та правильно використовувати його в своєму коді. Наприклад, використання умовного оператора для перевірки наявності елемента перед виконанням певних дій.

Синтаксис

contains(otherElement)

Параметри

*otherElement: Вузол для перевірки.

Return

Element: Повертає логічне значення, яке є true, якщо otherElement міститься в елементі, і false - якщо ні. Якщо параметр otherNode є null, метод завжди повертає false.

Переглядачі

Переглядач
	16	9	1.1	7	12

Переглядач
	4.4	18	9	1

Переглядач
	-	-

Приклади

У цьому прикладі ми маємо батьківський елемент <div> з класом parent, який містить дочірній елемент <div> з класом child. Є також чекбокс, який дозволяє переміщати дочірній елемент з батьківського елемента в <body> документа і навпаки.

При зміні стану чекбокса, дочірній елемент переміщується відповідно до вибору користувача, і метод contains() використовується для перевірки, чи батьківський елемент містить дочірній елемент. Результат виводиться в <div> з класом output.

Коли чекбокс не вибрано, дочірній елемент знаходиться всередині батьківського елемента, і виводиться повідомлення "Батьківський елемент містить дочірній елемент". Коли чекбокс вибрано, дочірній елемент переміщується в <body> документа, і виводиться повідомлення "Батьківський елемент не містить дочірній елемент".

Користувач може взаємодіяти з прикладом, вмикаючи та вимикаючи чекбокс. Це демонструє використання методу contains() для перевірки, чи батьківський елемент містить дочірній елемент, і як змінюється результат, коли дочірній елемент переміщається.

Цей приклад ілюструє практичне використання методу contains() для перевірки відношення між елементами в дереві DOM, а також демонструє динамічну зміну станів, з якими користувач може взаємодіяти.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNWwBgx">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому простому прикладі ми використовуємо метод contains() для перевірки, чи містить елемент parent елемент child. Метод повертає значення true, якщо елемент містить дочірній елемент, і false в протилежному випадку.

// HTML розмітка
// <div id="parent">
//   <div id="child">Child Element</div>
// </div>

// JavaScript код
const parentElement = document.getElementById("parent");
const childElement = document.getElementById("child");

if (parentElement.contains(childElement)) {
  console.log("Елемент `parent` містить елемент `child`");
} else {
  console.log("Елемент `parent` не містить елемент `child`");
}

У цьому складнішому прикладі ми використовуємо метод contains() для перевірки кожного елемента item всередині контейнера container. Ми використовуємо цикл forEach, щоб пройтися по кожному елементу item та вивести відповідне повідомлення про його наявність в контейнері. Цей приклад показує, як метод contains() може бути використаний для перевірки наявності декількох елементів всередині одного батьківського елемента.

// HTML розмітка
// <div class="container">
//   <div class="item">Item 1</div>
//   <div class="item">Item 2</div>
//   <div class="item">Item 3</div>
// </div>

// JavaScript код
const container = document.querySelector("div.container");
const items = document.querySelectorAll("div.item");

items.forEach(item => {
  if (container.contains(item)) {
    console.log(`Елемент "${item.textContent}" міститься всередині контейнера`);
  } else {
    console.log(`Елемент "${item.textContent}" не міститься всередині контейнера`);
  }
});

JS довідник

JavaScript

Наповнення JS розділу