HTML DOM contains() 메서드

<시간/>

HTML DOM contains() 메소드는 노드가 지정된 노드의 자손인지 여부를 찾는 데 사용됩니다. 자손은 노드, 손자 및 증손자의 직계 자식이 될 수 있습니다. 노드가 실제로 지정된 노드의 자손임을 나타내는 부울 true를 반환하고 지정된 노드의 자손이 아니면 false를 반환합니다.

구문

다음은 HTML DOM contains() 메서드의 구문입니다. -

node.contains(givenNode)

여기에서 givenNode는 givenNode가 노드에 포함되는지 여부를 지정하는 필수 매개변수 값입니다.

예시

HTML DOM contains() 메서드의 예를 살펴보겠습니다.

저는 미국

attr 요소가 div 요소의 자손인지 여부를 확인하려면 아래 버튼을 클릭하세요.

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM contains() 메서드

DESCENDANT 버튼 클릭 시 -

HTML DOM contains() 메서드

위의 예에서 -

요소가 있고

요소 내부에 요소가 있는 ID가 "DIV1"인

요소를 만들었습니다. 테두리가 "DIV1"에 적용되고 너비가 CSS 스타일을 사용하여 지정되었습니다 -

#DIV1{ 테두리:2px 단색 파란색; width:160px;}
저는 미국 

에 살고 있습니다. 
 그런 다음 사용자가 클릭할 때 divDesc() 메서드를 실행하는 CONTAINS 버튼을 만들었습니다. 
 
 
 divDesc() 메서드는 문서 객체의 getElementById() 메서드를 사용하여  요소를 가져와 attr 변수에 할당합니다. 그런 다음 
 요소의 contains 메소드를 사용하고  요소를 매개변수로 전달합니다.
 
 
 요소는  요소를 포함하므로, 즉  요소는  요소의 자손이므로 true를 반환합니다. 조건문을 사용하여 id가 "Sample" -
인 단락의 innerHTML 속성을 사용하여 적절한 텍스트를 표시합니다. 함수 divDesc() { var attr =document.getElementById("At"); var div =document.getElementById("DIV1").contains(attr); if(div==true) document.getElementById("Sample").innerHTML="Span 요소는 div 요소의 자손입니다." else document.getElementById("Sample").innerHTML="Span 요소는 div 요소의 자손이 아닙니다."}