상위 요소에 하위 요소가 포함된 경우 JavaScript에서 true를 반환하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

상위 요소에 하위 요소가 포함된 경우 JavaScript에서 true를 반환하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-09-03 21:01:08

앞으로

704명이 탐색했습니다.

如果父元素包含子元素，JavaScript 中如何返回 true？

이 튜토리얼에서는 JavaScript에서 상위 요소에 하위 요소가 포함된 경우 true를 반환하는 방법을 알아봅니다. 부모 요소와 자식 요소라는 두 개의 HTML 요소가 있고 부모 요소에 자식 요소가 포함되어 있는지 알고 싶다고 가정해 보겠습니다.

Node.contains() 메서드 사용

Node 인터페이스의 contains() 메서드는 해당 노드가 해당 노드의 자손인지 여부를 나타내는 부울 값을 반환합니다.

상위 노드가 하위 요소를 포함하는 요소인지 알고 싶다면 Node.contains() 메서드를 사용할 수 있습니다.

이것은 간단한 예입니다.

<div id="parent">
   <p id="child">Some text</p>
</div>

로그인 후 복사

아래 JavaScript 코드 조각은 상위 요소에 하위 요소가 포함되어 있는지 확인합니다.

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.contains(child) 
// returns true

로그인 후 복사

위 코드에서는 getElementById() 메서드를 사용하여 상위 요소와 하위 요소의 참조를 가져옵니다.

그런 다음 parent.contains(child)를 사용하여 상위 요소에 하위 요소가 포함되어 있는지 확인합니다.

Example

전체 HTML 코드는 다음과 같습니다. -

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="parent">
      <p id="child"></p>
   </div>
   <div id="result"></div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML ="Does parent contain child: "+ parent.contains(child)
   </script>
</body>
</html>

로그인 후 복사

hasChildNodes() 메소드 사용

상위 요소에 하위 요소가 포함되어 있는지 확인하는 또 다른 방법은 hasChildNodes() 메소드를 사용하는 것입니다.

hasChildNodes() 메서드에 하위 요소가 포함되어 있으면 true를 반환합니다.

이것은 간단한 예입니다. -

<div id="parent">
   <p id="child">Some text</p>
</div>

로그인 후 복사

아래 JavaScript 코드를 참조하세요. -

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.hasChildNoodes();

로그인 후 복사

위 코드에서는 getElementById() 메서드를 사용하여 상위 요소와 하위 요소의 참조를 가져옵니다.

그런 다음 hasChildNodes 메서드를 사용하여 상위 요소가 존재하는지, 해당 요소에 하위 요소가 있는지 확인합니다.

예

전체 HTML 코드는 다음과 같습니다. -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="parent">
      <p id="child"></p>
   </div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML = parent.hasChildNodes();
   </script>
</body>
</html>

로그인 후 복사

요약하자면, 상위 요소에 하위 요소가 포함되어 있는지 확인하는 방법에는 여러 가지가 있습니다. Node.contains() 또는 hasChildNodes() 메서드를 사용할 수 있습니다.

위 내용은 상위 요소에 하위 요소가 포함된 경우 JavaScript에서 true를 반환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!