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

      百恒網(wǎng)絡

      南昌百恒網(wǎng)絡

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

      百恒網(wǎng)絡 2016-12-01 9451

      開發(fā)人員經(jīng)常需要確定某個給定的節(jié)點是不是另一個節(jié)點的后代。為此,IE率先引入了contains() 方法,讓開發(fā)人員無須遍歷DOM文檔樹即可獲知此信息。應該在作為搜索起點的祖先節(jié)點上調(diào)用contains()方法,并為該方法傳遞一個參數(shù),即要檢測的后代節(jié)點。如果傳人的節(jié)點是當前節(jié)點的 后代,那么方法返回true;否則返回false。來看下面的例子:
      ? ? ? ?alert(document.documentElement.contains(document.body>); //true
      ? ? ? ?這個例子測試元素是不是元素的后代,而在格式正確的HTML頁面中,這個例子會返回true。IE、Safari3及更高版本、Opera 8及更高版本、Chrome都支持contains()方法。Safari2x中雖然也有這個方法.但無法正常使用。因此,需要通過瀏覽器檢測來確定Safari的版本,以保證 可以正常使用這個方法。
      ? ? ? ?Firefox不支持contains()方法,但Firefox在DOM3級實現(xiàn)中提供了一個替代的compareDocumentPosition()方法(Opera 9.5及更高版本也支持此方法)。這個方法用于確定兩個節(jié)點之間的關系,返回一個表示該關系的位掩碼( bitmask)。下表列出了這個位掩碼的值。?
      ? ? ? ?為模仿contains()方法,應該關注的是掩碼16。可以對compareDocumentPosition()的結果執(zhí)行按位與,以確定參考節(jié)點(調(diào)用compareDocumentPosition()方法的當前節(jié)點)是否包含給定的節(jié)點(傳人的節(jié)點)。來看下面的例子:
      ? ? ? ?var result=document.documentElement. compareDocumentPosition( document. body);
      ? ? ? ?alert(!!(result&16));
      ? ? ? ?執(zhí)行上面的代碼后,結果會變成20(表示“居后”的4加上表示“被包含”的16)。對掩碼16 執(zhí)行按位操作會返回一個非零數(shù)值,而兩個邏輯非操作符會將該數(shù)值轉(zhuǎn)換成布爾值。
      ? ? ? ?使用一些瀏覽器及能力檢測,就可以寫出如下所示的一個通用的contains()函數(shù):
      ? ? ? ?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:
      ? ? ? ? ? ? ? }
      ? ? ? ?}
      ? ? ? ?這個函數(shù)使用了三種方法來確定一個節(jié)點是不是另一個節(jié)點的后代。函數(shù)的第一個參數(shù)是參考節(jié)點,第二個參數(shù)是要檢查的節(jié)點。在函數(shù)體內(nèi),首先檢測refNode中是否存在contains()方法(能力檢測)。這一部分代碼還檢查了當前瀏覽器所用的WebKit版本號。如果方法存在而且不是WebKit (! client.engine.webkit),則繼續(xù)執(zhí)行代碼。否則,如果瀏覽器是WebKit且至少是Safari 3 (WebKit版本號為522或更高),那么也可以繼續(xù)執(zhí)行代碼。在WebKit版本號小于522的Safari瀏覽器中, contains()方法不能正常使用。
      ? ? ? ?接下來檢查是否存在compareDoumentPosition()方法,而函數(shù)的最后一步則是自otherNode 開始向上遍歷DOM結構,遞歸地取得parentNode并檢查是否與refNode相等。在文檔樹的頂端, parentNode的值等于null,于是循環(huán)結束。這是針對舊版本Safari設計的一個后備策略。
      ? 本文僅限內(nèi)部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設公司-百恒網(wǎng)絡http://www.dgscpc.com/如轉(zhuǎn)載請注明出處!

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

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

      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售前咨詢 售前咨詢
       
      售后服務 售后服務
       
      售后服務 售后服務
       
      備案專線 備案專線
       
      ×
      日韩精品人妻系列无码专区| 精品国产麻豆免费人成网站| 国产成人综合日韩精品婷婷九月| 久久久久久亚洲精品影院| 精品日韩亚洲AV无码| 国产成人精品无码播放| 中文字幕日韩精品在线| 国产精品狼人久久久久影院| 日韩福利电影在线观看| 日韩有码一区二区| 国产精品国产香蕉在线观看网| 国产精品99亚发布| 人妻精品无码一区二区三区| 在线播放国产精品| 国产精品美女久久久| 亚洲国产精品午夜电影| 91精品国产综合久| 在线精品视频播放| 亚洲精品偷拍无码不卡av| 精品日韩亚洲AV无码| 91精品国产自产在线观看永久∴ | 精品999久久久久久中文字幕| 精品国产日韩亚洲一区| 国产精品99久久久久久www| 亚洲精品国产综合久久一线| 香蕉99久久国产综合精品宅男自| 国产一区二区三区日韩精品| 日韩在线一区二区三区视频| 精品三级66在线播放| 无码人妻精品一区二| 亚洲日韩国产精品乱| 国产精品伊人久久伊人电影| 国产精品无码无卡无需播放器| 国产精品永久久久久久久久久| 精品无人区无码乱码毛片国产| 精品无码三级在线观看视频| 91精品国产高清91久久久久久| 国内精品久久久久影院薰衣草| 国产在线精品一区二区在线观看| 久久精品国产只有精品2020| 久久国产精品2020盗摄|