JavaScript метод Node.contains()

JavaScript Node

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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 метода .contains()
JavaScript Node
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.