JavaScript метод Node.contains()

Определение и применение

JavaScript метод .contains() объекта Node возвращает логическое значение, которое указывает на то совпадает ли указанный узел с данным узлом или является его потомком, или нет. В том случае если узел является потомком возвращается значение true, если нет, то возвращается значение false.

Узел содержит и самого себя: node.contains(node) возвращает true. Для null результат равен false.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Node.contains

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
contains	✓16	✓12	✓9	✓7	✓1.1	✓18	✓9	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const booleanResult = node.contains(otherNode);

Спецификация

DOM Standard.

Значения параметров

Пример использования

Проверка, содержится ли элемент в списке

Нажмите ▶, затем Contains?: появится true. Нажмите Remove active, чтобы удалить первый пункт, и снова Contains? — результат станет false.

index.html

HTML

<button data-migration-click-0="">Contains?</button>
<button data-migration-click-2="">Remove active</button>
<ul id="first">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<p id="result"></p>

main.js

JavaScript

const firstUl = document.getElementById('first'),
    active = document.querySelector('.active'),
    result = document.getElementById('result')

function myFunc() {
    const contains = firstUl.contains(active)
    result.innerHTML = contains
}

function myFunc2() {
    if (active.parentNode) firstUl.removeChild(active) // повторное удаление вызвало бы NotFoundError
    result.innerHTML = ''
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function () {
    myFunc2()
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')

В этом примере с использованием метода addEventListener() при нажатии на определенную кнопку (HTML элемент <button>) вызываем функции myFunc(), или myFunc2(). В первом случае мы с помощью метода .contains() проверяем содержится ли элемент с классом active внутри элемента <ul>, и с помощью свойства innerHTML добавляем результат в элемент <p>.

Вторая функция с помощью метода removeChild() удаляет элемент с классом active, и с помощью свойства innerHTML очищает содержимое элемента <p>. Если после удаления мы вызовем первую функцию, то результат в этом случае будет соответствовать значению false (узел не содержится в элементе <ul>).