十年專注于品牌網站建設 十余年專注于網站建設_小程序開發_APP開發,低調、敢創新、有情懷!
      南昌百恒網絡微信公眾號 掃一掃關注
      小程序
      tel-icon全國服務熱線:400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡微信小程序

      百恒網絡

      南昌百恒網絡

      關于documentElement.contains()方法的使用方法及注意事項

      百恒網絡 2016-12-01 9450

      開發人員經常需要確定某個給定的節點是不是另一個節點的后代。為此,IE率先引入了contains() 方法,讓開發人員無須遍歷DOM文檔樹即可獲知此信息。應該在作為搜索起點的祖先節點上調用contains()方法,并為該方法傳遞一個參數,即要檢測的后代節點。如果傳人的節點是當前節點的 后代,那么方法返回true;否則返回false。來看下面的例子:
      ? ? ? ?alert(document.documentElement.contains(document.body>); //true
      ? ? ? ?這個例子測試元素是不是元素的后代,而在格式正確的HTML頁面中,這個例子會返回true。IE、Safari3及更高版本、Opera 8及更高版本、Chrome都支持contains()方法。Safari2x中雖然也有這個方法.但無法正常使用。因此,需要通過瀏覽器檢測來確定Safari的版本,以保證 可以正常使用這個方法。
      ? ? ? ?Firefox不支持contains()方法,但Firefox在DOM3級實現中提供了一個替代的compareDocumentPosition()方法(Opera 9.5及更高版本也支持此方法)。這個方法用于確定兩個節點之間的關系,返回一個表示該關系的位掩碼( bitmask)。下表列出了這個位掩碼的值。?
      ? ? ? ?為模仿contains()方法,應該關注的是掩碼16。可以對compareDocumentPosition()的結果執行按位與,以確定參考節點(調用compareDocumentPosition()方法的當前節點)是否包含給定的節點(傳人的節點)。來看下面的例子:
      ? ? ? ?var result=document.documentElement. compareDocumentPosition( document. body);
      ? ? ? ?alert(!!(result&16));
      ? ? ? ?執行上面的代碼后,結果會變成20(表示“居后”的4加上表示“被包含”的16)。對掩碼16 執行按位操作會返回一個非零數值,而兩個邏輯非操作符會將該數值轉換成布爾值。
      ? ? ? ?使用一些瀏覽器及能力檢測,就可以寫出如下所示的一個通用的contains()函數:
      ? ? ? ?function contains( refNode, otherNode){
      ? ? ? ? ? ? ? if (typeof refNode. contains==”function”&&
      ? ? ? ? ? ? ? ? ? ? ?(! client. engine .webkit ff client. engine .webkit>=522)){
      ? ? ? ? ? ? ? return refNode. contains( otherNode);
      ? ? ? ?} else if (typeof refNode. compareDocumentPosition== ”function"){
      ? ? ? ? ? ? ? return!!(refNode. compareDocumentPosition( otherNode) &16);
      ? ? ? ?} else{
      ? ? ? ? ? ? ? var node=otherNode. parentNode;
      ? ? ? ?do{
      ? ? ? ? ? ? ? if (node===refNode){
      ? ? ? ? ? ? ? ? ? ? ?return true;

      ? ? ? ? ? ? ? } else {
      ? ? ? ? ? ? ? ? ? ? ?node=node. parentNode;
      ? ? ? ? ? ? ? }
      ? ? ? ?} while (node!==null);
      ? ? ? ? ? ? ? return false:
      ? ? ? ? ? ? ? }
      ? ? ? ?}
      ? ? ? ?這個函數使用了三種方法來確定一個節點是不是另一個節點的后代。函數的第一個參數是參考節點,第二個參數是要檢查的節點。在函數體內,首先檢測refNode中是否存在contains()方法(能力檢測)。這一部分代碼還檢查了當前瀏覽器所用的WebKit版本號。如果方法存在而且不是WebKit (! client.engine.webkit),則繼續執行代碼。否則,如果瀏覽器是WebKit且至少是Safari 3 (WebKit版本號為522或更高),那么也可以繼續執行代碼。在WebKit版本號小于522的Safari瀏覽器中, contains()方法不能正常使用。
      ? ? ? ?接下來檢查是否存在compareDoumentPosition()方法,而函數的最后一步則是自otherNode 開始向上遍歷DOM結構,遞歸地取得parentNode并檢查是否與refNode相等。在文檔樹的頂端, parentNode的值等于null,于是循環結束。這是針對舊版本Safari設計的一個后備策略。
      ? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.dgscpc.com/如轉載請注明出處!

      400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

      歡迎您的光顧,我們將竭誠為您服務×

      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售后服務 售后服務
       
      售后服務 售后服務
       
      備案專線 備案專線
       
      ×
      91麻豆精品视频在线观看| 亚洲欧美日韩一区二区三区 | 国产精品制服丝袜一区| 亚洲AV成人无码久久精品老人| 国内精品伊人久久久久网站| 亚洲精品国产高清嫩草影院| 亚洲AV日韩AV一区二区三曲| 国产91精品久久久久999| 国产精品亚洲精品日韩动图| 苍井空亚洲精品AA片在线播放| 亚洲国产精品精华液| 国产精品久久久久影视不卡| 182tv精品视频在线播放| 青青青国产精品一区二区| 久久久久成人精品| 久久这里只有精品66| 亚洲av永久无码精品国产精品| 国产精品亚洲成在人线| 亚洲精品无码久久千人斩| 91视频国产精品| 亚洲乱码精品久久久久..| 亚洲国产另类久久久精品小说| 国语自产偷拍精品视频偷蜜芽| 国自产精品手机在线观看视频| 久久精品国产99久久久香蕉| 久久国产午夜精品一区二区三区| 国产精品自在线拍国产电影| 精品国产一区二区三区久久蜜臀| 国产精品福利片免费看| 国产成人精品免费视频大全| 亚洲国产精品尤物YW在线观看| 无码日韩精品一区二区人妻 | 久久精品私人影院免费看| 久久精品成人免费看| 囯产精品一品二区三区| 久久综合精品不卡一区二区| 先锋影音国产精品| 91大神精品在线观看| 精品国产品国语在线不卡| 99re热久久这里只有精品首页| 国产精品反差婊在线观看|