contains、compareDocumentPosition判断元素位置关系

最新推荐文章于 2023-11-29 20:31:05 发布

原创最新推荐文章于 2023-11-29 20:31:05 发布 · 865 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #button #javascript #html #border #div

Javascript 专栏收录该内容

8 篇文章

订阅专栏

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <mce:script language="javascript"></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"></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