contains 메서드

contains 메서드를 사용하면 한 요소가 내부에 다른 요소를 포함하는지 확인할 수 있습니다. 메서드의 매개변수로는, 메서드를 호출한 요소 내부에 위치하는지 확인할 요소를 전달합니다.

구문

javascript부모.contains(자식요소);

예제

#child 단락이 #parent 블록 안에 있는지 확인해 보겠습니다:

html<div id="parent">
  <p id="child"></p>
</div>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

코드 실행 결과:

javascripttrue

예제

이번에는 부모 요소 내에 전달된 요소가 없으므로 메서드는 false를 반환합니다:

html<div id="parent"></div>
<p id="child"></p>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

코드 실행 결과:

javascriptfalse

예제

메서드가 호출된 동일한 요소를 전달할 수도 있으며, 이 경우 메서드는 true를 반환합니다:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');
let contains = parent.contains(parent);

console.log(contains);

코드 실행 결과:

javascripttrue

참고 항목