在IE中使用內建的contains
來判斷節點是否在某容器中
ex:
document.documentElement.contains(document.body) === true
document.body.contains(document.documentElement) === false
但在FF下沒有此屬性,為了相容FF推出compareDocumentPosition這個東西但這個只返回一個數值:
A.compareDocumentPosition(B)
詳細資料列表(
出自url:http://apps.hi.baidu.com/share/detail/31239672
):
Bits Number Meaning
000000 0 元素一致
000001 1 節點在不同的文檔(或者一個在文檔之外)
000010
2 節點 B 在節點 A 之前
000100 4 節點 A 在節點 B 之前
001000 8 節點 B 包含節點 A
010000 16 節點 A 包含節點 B
100000 32 瀏覽器的私人使用
ex:
1.
1>document.documentElement.compareDocumentPosition(document.body) === 20
2>document.body.compareDocumentPosition(document.documentElement) === 10
解釋下:
1>body在html裡面所以有16,然後html在body前面(我理解的是<html>..<body>)所以有4,故加起來就是20.
2>html在body裡面所以有8,然後body在html後面(我理解的是<html>..<body>)所以有2,故加起來就是10.
2.
1>document.body.compareDocumentPosition(document.getElementsByTagName("head")[0]) === 2
2>document.getElementsByTagName("head")[0].compareDocumentPosition(document.body) === 4
解釋下:
head和body沒有內含項目關聯性(理解為同一層級)所以是0,而head在body的前面,所以有個2,故加起來就是2.
head和body沒有內含項目關聯性(理解為同一層級)所以是0,而body在head的後面,所以就是4,故加起來就是4.