HTML | DOM compareDocumentPosition() 方法

DOM compareDocumentPosition()方法用于比较两个节点，它返回一个整数，描述它们在文档中的位置。

句法：

node1.compareDocumentPosition(node2)

返回值：这将返回一个整数值及其含义如下：

• 1：这意味着两个节点不属于同一个文档。
• 2：这意味着两个节点node1位于node2之后。
• 4：这意味着两个节点node1位于node2之前。
• 8：这意味着两个节点node1位于node2内部。
• 16：这意味着两个节点node2位于node1内部。
• 32：这表示两个节点没有关系或者是同一个元素上的两个属性。

示例 1：这将仅返回单个值。

    div {
        width: 90%;
        height: 60%;
        padding: 20px;
        border: 2px solid green;
        font-weight: bold;
    }
      
    #ans {
        background-color: lightgrey;
        display: block;
        width: 100px;
        font-weight: bold;
        height: 20px;
        padding: 9px;
        color: green;
        float: right;
        margin-top: -20px;
    }
      
    #res {
        color: black;
    }

  

    
        
          This is first paragraph
        
        
        
          This is second paragraph
        
        
        
          This is third paragraph
        
        
        Answer : 
    
    
    
    
    
  
    
        function myFunction() {
            var x = p1.compareDocumentPosition(p2);
            document.getElementById("res").innerHTML = x;
        }
    
  

  

输出：
在点击按钮之前：

点击按钮后：

示例 2：这将返回两个值的组合。

    div {
        width: 90%;
        height: 60%;
        padding: 20px;
        border: 2px solid green;
        font-weight: bold;
    }
      
    #ans {
        background-color: lightgrey;
        display: block;
        width: 100px;
        font-weight: bold;
        height: 20px;
        padding: 9px;
        color: green;
        float: right;
        margin-top: -20px;
    }
      
    #res {
        color: black;
    }

  

    
        
        This tutorial is on 
          
             HTML | DOM compareDocumentPosition() Method
           on GeeksforGeeks.!
        
        
        
          Answer : 
          
        
        
    
    
    
    
    
  
    
        function myFunction() {
            var x = p1.compareDocumentPosition(p2);
            document.getElementById("res").innerHTML = x;
        }
    
  

  

输出：
点击按钮前：

单击按钮后：答案将是 20。’4′ 表示第一个节点位于第二个节点之前，’16’ 表示第二个节点位于第一个节点内部。

注意：返回值可以是值的组合。即，如果返回值是 20，则意味着 p2 在 p1 内部，’16’ 并且 p1 位于 p2 ‘4’ 之前。

支持的浏览器：

• 谷歌合唱团
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器