您的位置：首页 > 大数据 > 人工智能

contains、compareDocumentPosition判断元素位置关系

2009-08-30 21:23 399 查看

在ie中使用contains可以很简单的判断一个元素是否包含另一个元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<mce:script language="javascript"><!--
var $ = function(id){return document.getElementById(id)}
function function1() {
var m = $('myDiv').contains($('myB'))
if (m == true){
m = "YES"
} else {
m = "NO"
}
alert(m)
}
// --></mce:script>
</HEAD>

<BODY>
<div id="myDiv" style="width:300; height:100; border:solid; 1px blue">div element<br>
<input id="myB" type="button" value="Is this button contained within the div element?" onclick="function1();">
</div>
<div id='test'>
some other elements
</div>
</BODY>
</HTML>

在firefox中，则是使用compareDocumentPosition方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<mce:script language="javascript"><!--
var $ = function(id){return document.getElementById(id)}
function function1() {
var m = !!($('myDiv').compareDocumentPosition($('myB'))&16) )
if (m == true){
m = "YES"
} else {
m = "NO"
}
alert(m)
}
// --></mce:script>
</HEAD>

<BODY>
<div id="myDiv" style="width:300; height:100; border:solid; 1px blue">div element<br>
<input id="myB" type="button" value="Is this button contained within the div element?" onclick="function1();">
</div>
<div id='test'>
some other elements
</div>
</BODY>
</HTML>

不过相比于ie中contains直接返回true或FALSE，compareDocumentPostion返回的是数字

该数字用来判断一个节点是另一个节点的后代(10-01010)还是祖先(20-10100),在前面(4-00100)还是后面(2-00010),同一节点为0(00000)

五位的二进制的各个位置表示不同的值:

第五位:祖先

第四位:后代

第三位:前面

第二位:后面

第一位:本身

相匹配的值为1,反之为0

这样对应五种情况,值分别是:10100(20), 01010(10), 00100(4), 00010(2), 00000(0)

在上面这段代码的判断中，用到了按位与运算——’&’，

则是因为16的二进制为：10000，这样的话，他只有与20（10100）进行按位与运算，结果才不为0000

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航