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() може бути корисним при роботі з подіями або при необхідності перевірити, чи міститься певний елемент у контейнері перед виконанням певної дії. Наприклад, перевірка перед видаленням елемента з DOM.

автор: Bond правити

Порада

Для початківців важливо вивчити синтаксис методу contains() та правильно використовувати його в своєму коді. Наприклад, використання умовного оператора для перевірки наявності елемента перед виконанням певних дій.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

contains(otherElement)

Параметри

otherElement

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

автор: Bond

правити

Повернення

Element

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div id="parent">Демонстраційний елемент</div>
<div id="child">Демонстраційний елемент</div>

// 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`");
}

// 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}" не міститься всередині контейнера`);
  }
});