[DOM_Element] JS - contains() 메서드 ★ - 자손노드인지 판별 (= contains메서드 = 컨테인즈 메서드)

목차

1. contains() 예제 - 매개변수가 자손노드인지 판별
2. contains() 정의
3. contains() 구문

contains() 예제 - 매개변수가 자손노드인지 판별

 

<style>

#box {border: 1px solid black;}

</style>

<div id="box">

  <p>홈짱닷컴 <span id="host"><b>Homzzang.com</b></span></p>

</div>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var span = document.getElementById("host");

  var boxc = document.getElementById("box").contains(span);

  document.getElementById("demo").innerHTML = boxc;

}

</script>

 

결과보기

결과값: true

contains() 정의

 

해당 노드(B_node)가 지정 노드(A_node)의 자손인지 여부 판별.

 

---

 

1.

특정 클래스 보유 여부 판별  (JavaScript vs. jQuery)

• [JS] - object.classList.contains('클래스명');
• [JQ] - $(selector).hasClass('클래스명');

 

2.

주요 브라우저 모두 지원.

 

3.

MDN contain() 메서드 예제 보기

 

contains() 구문

 

A_node.contains(B_node)

 

---

[매개변수]

 

B_node

필수. A_node의 자손인지 판별한 노드

 

---

[반환값]

 

• B_node가 A_node의 자손인 경우, true 반환.
• B_node가 A_node의 자손 아닌 경우, false 반환.