首頁 > web前端 > js教程 > 如何分別使用javascript和jquery來偵測dom節點存在的方法實例詳解

如何分別使用javascript和jquery來偵測dom節點存在的方法實例詳解

伊谢尔伦
發布: 2017-07-20 11:46:15
原創
1121 人瀏覽過

1. JavaScript判斷DOM節點是否存在頁面中

JavaScript原生函數沒有提供判斷DOM節點是否存在方法,我們通常取得DOM節點幾乎都是document.getElement..方法,會傳回一個object數組合集,我們可以透過object[0],object[1]這樣來存取這個合集的每一個物件。既然傳回的是數組合集,那麼就有length屬性,而length大於等於1即表示DOM節點存在頁面中




# #

Object.prototype.exist = function(){ 
 if(typeof this !='undefined' && this.length>=1){
  return true;
 }
 
 return false;
};
登入後複製
使用:

假設頁面有如下節點

#
<p>这里是p节点</p>
<p>这里是p节点</p>
<span>这里是span节点</span>
登入後複製

判斷節點是否在頁面:


var is_exist = document.getElementsByTagName(&#39;p&#39;).exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName(&#39;span&#39;).exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName(&#39;p&#39;).exist();
alert(is_exist); // false
登入後複製


注意:

如果使用是使用document.getElementById()方法取得物件的就不能使用exist()方法,因為根據ID取節點物件的方法在取不到節點的情況下會回傳一個空對象,不會整合原型exist()函數,所以會報錯!所以如果是根據ID取物件的可以直接if(obj)這樣既可判斷DOM節點是否存在頁面中

#2. jQuery判斷DOM節點是否存在頁面中

新增原型:

######
(function($) {
 $.fn.exist = function(){ 
  if($(this).length>=1){
   return true;
  }
  return false;
 };
})(jQuery);
登入後複製
###使用方法:###假如頁面有如下DOM節點############

这里是id=a节点

<p>这里是p节点</p> <p>这里是p节点</p> <span>这里是span节点</span>
登入後複製
###判斷:##### #######
alert($(&#39;#aaa&#39;).exist()); // false
alert($(&#39;#a&#39;).exist()); // true
alert($(&#39;p&#39;).exist()); // true
alert($(&#39;p&#39;).exist()); // false
登入後複製
###以上兩種方法其實都是根據物件集合的length屬性來判斷物件是否存在。 ###

以上是如何分別使用javascript和jquery來偵測dom節點存在的方法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板