JS中判斷2個節點在DOM結構位置

來源:互聯網
上載者:User

在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.

 

 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.