contains 메서드
contains 메서드를 사용하면
한 요소가 내부에 다른 요소를 포함하는지 확인할 수 있습니다.
메서드의 매개변수로는, 메서드를 호출한 요소 내부에
위치하는지 확인할 요소를 전달합니다.
구문
부모.contains(자식요소);
예제
#child 단락이
#parent 블록 안에 있는지 확인해 보겠습니다:
<div id="parent">
<p id="child"></p>
</div>
let parent = document.querySelector('#parent');
let child = document.querySelector('#child');
let contains = parent.contains(child);
console.log(contains);
코드 실행 결과:
true
예제
이번에는 부모 요소 내에 전달된 요소가 없으므로
메서드는 false를 반환합니다:
<div id="parent"></div>
<p id="child"></p>
let parent = document.querySelector('#parent');
let child = document.querySelector('#child');
let contains = parent.contains(child);
console.log(contains);
코드 실행 결과:
false
예제
메서드가 호출된 동일한 요소를 전달할 수도 있으며,
이 경우 메서드는 true를 반환합니다:
<div id="parent"></div>
let parent = document.querySelector('#parent');
let contains = parent.contains(parent);
console.log(contains);
코드 실행 결과:
true
