El método DOM compareDocumentPosition() se usa para comparar dos Nodes y devuelve un número entero que describe dónde están posicionados en el documento.
Sintaxis:
node1.compareDocumentPosition(node2)
Valor devuelto: Esto devuelve un valor entero y su significado de la siguiente manera:
- 1: Esto significa que los dos Nodes no pertenecen al mismo documento.
- 2: Esto significa que los dos Nodes, el Node1, se colocan después del Node2.
- 4: Esto significa que los dos Nodes, el Node1, se colocan antes que el Node2.
- 8: Esto significa que los dos Nodes, el Node1, se colocan dentro del Node2.
- 16: Esto significa que los dos Nodes, el Node2, están colocados dentro del Node1.
- 32: Esto significa que los dos Nodes no tienen relación o son dos atributos en el mismo elemento.
Ejemplo-1: Esto devolverá solo un valor único.
HTML
<!DOCTYPE html>
<html>
<style>
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;
}
</style>
<body>
<div>
<p id="p1">
This is first paragraph
</p>
<p id="p2">
This is second paragraph
</p>
<p id="p3">
This is third paragraph
</p>
<p id="ans">Answer : <span id="res"></span></p>
</div>
<br>
<input type = button
onclick="myFunction()" value =
"Click Me.!" />
<br>
<script>
function myFunction() {
var x = p1.compareDocumentPosition(p2);
document.getElementById("res").innerHTML = x;
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: Esto devolverá una combinación de dos valores.
HTML
<!DOCTYPE html>
<html>
<style>
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;
}
</style>
<body>
<div>
<p id="p1">This tutorial is on
<span id="p2">
HTML | DOM compareDocumentPosition() Method
</span> on GeeksforGeeks.!
</p>
<p id="ans">
Answer :
<span id="res"></span>
</p>
</div>
<br>
<input type=button onclick="myFunction()"
value="Click Me.!" />
<br>
<script>
function myFunction() {
var x = p1.compareDocumentPosition(p2);
document.getElementById("res").innerHTML = x;
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón: la respuesta será 20. ‘4’ significa que el primer Node se ubica antes que el segundo Node y ’16’ el segundo Node se ubica dentro del primer Node.
Nota: El valor de retorno puede ser una combinación de valores. es decir, si el valor de retorno es 20, eso significa que p2 está dentro de p1, ’16’ y p1 está posicionado antes de p2 ‘4’.
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 9 y superior
- Firefox 1 y superior
- Ópera 12.1 y superior
- Safari 4 y superior
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA