>웹 프론트엔드 >HTML 튜토리얼 >HTML DOM CompareDocumentPosition() 메서드 문서 위치 비교

HTML DOM CompareDocumentPosition() 메서드 문서 위치 비교

PHPz
PHPz앞으로
2023-09-14 19:21:101251검색

HTML DOM CompareDocumentPosition() 메서드는 주어진 노드 위치를 문서의 다른 노드와 비교하는 데 사용됩니다. 이 메소드의 반환 유형은 문서에서의 위치를 ​​설명하는 정수 유형입니다. 정수 반환 값은 지정된 대로입니다. -

1: No relationship, the two nodes do not belong to the same document.
2: The first node (para1) is positioned after the second node (para2).
4: The first node (para1) is positioned before the second node (para2).
8: The first node (para1) is positioned inside the second node (para2).
16: The second node (para2) is positioned inside the first node (para1).
32: No relationship, or the two nodes are two attributes on the same element.

Syntax

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

node.compareDocumentPosition(node)

Node 여기서는 현재 노드와 비교하려는 노드를 지정하는 노드 개체 유형입니다. .

Example

CompareDocumentPosition() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</p>
<button onclick="docPosition()">POSITION</button>
<p id="Sample"></p>
<script>
   function docPosition() {
      var p1 = document.getElementById("para1").lastChild;
      var p2 = document.getElementById("para2").lastChild;
      var x = p2.compareDocumentPosition(p1);
      document.getElementById("Sample").innerHTML = x;
   }
</script>
</body>
</html>

Output

이렇게 하면 다음과 같은 출력이 생성됩니다.-

HTML DOM compareDocumentPosition() 方法

比较文档位置

Position 버튼을 클릭할 때-

HTML DOM compareDocumentPosition() 方法

比较文档位置

위의 예에서는 중간 -

먼저 ID가 "para1"과 "

paragraph 2"인 두 개의 요소를 만들었습니다.

<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>

그런 다음 사용자가 클릭할 때 docPosition() 메서드를 실행하는 버튼 POSTION을 만들었습니다.

<button onclick="docPosition()">POSITION</button>

docPosition() 메서드는 문서 개체의 getElementById() 메서드를 사용하여 e388a4556c0f65e1904146cc1a846bee 요소를 가져옵니다. 그런 다음 두 단락의 lastchild 속성 값을 각각 변수 p1과 p2에 할당합니다.

그런 다음 p1을 매개변수로 사용하여 p2에서 CompareDocumentPosition() 메서드를 호출합니다. 이는 p1을 기준으로 p2의 위치를 ​​비교하고 싶다는 의미입니다. 여기서 p2는 p1 뒤에 있으므로 반환 값은 2 -

function docPosition() {
   var p1 = document.getElementById("para1").lastChild;
   var p2 = document.getElementById("para2").lastChild;
   var x = p2.compareDocumentPosition(p1);
   document.getElementById("Sample").innerHTML = x;
}
입니다.

위 내용은 HTML DOM CompareDocumentPosition() 메서드 문서 위치 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제