HTML DOMのcompareDocumentPosition()メソッドドキュメントの場所を比較する-htmlチュートリアル-php.cn

HTML DOMのcompareDocumentPosition()メソッドドキュメントの場所を比較する

PHPz

リリース： 2023-09-14 19:21:10

転載

1256 人が閲覧しました

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)

ログイン後にコピー

ここでのノードは、ノードオブジェクトです。 type は、現在のノードと比較するノードと比較することを指定します。

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() 方法

比较文档位置

「位置」ボタンをクリックすると -

HTML DOM compareDocumentPosition() 方法

比较文档位置

上記の例では -

最初に 2 つの 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() メソッドを使用して取得します。 ;p>要素。次に、2 つの段落の 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 中国語 Web サイトの他の関連記事を参照してください。