HTML DOM CompareDocumentPosition() 메서드 문서 위치 비교-HTML 튜토리얼-php.cn

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

PHPz

풀어 주다： 2023-09-14 19:21:10

앞으로

1241명이 탐색했습니다.

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() 메서드를 사용하여

요소를 가져옵니다. 그런 다음 두 단락의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!