JavaScript метод Node.contains()

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`Node.contains()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

const booleanResult = node.contains( otherNode );

node - Node
otherNode - Node

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

Document Object Model (DOM) Level 1

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .contains()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Contains?</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "myFunc2()">Remove active</button> <!-- добавляем атрибут событий onclick -->
		<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>
		<script>
	const firstUl = document.getElementById("first"), // находим элемент по id
	      active = document.querySelector(".active"), // находим элемент по классу
	      result = document.getElementById("result"); // находим элемент по id

	function myFunc() {
	  const contains = firstUl.contains(active); // проверяем содержится ли элемент
	  result.innerHTML = contains; // вставляем результат проверки в элемент <p>
	}

	function myFunc2() {
	  first.removeChild(active); // удаляем элемент
	  result.innerHTML = ""; // убираем содержимое элемента <p>
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript метода .contains()

JavaScript Node