DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS/jQuery判斷DOM節點是否存在的簡單方法
JS/jQuery判斷DOM節點是否存在的簡單方法
編輯:關於JavaScript     

JS原生判斷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;
};

使用:

假設頁面有如下節點

<div>這裡是DIV節點</div>
<div>這裡是DIV節點</div>
<span>這裡是span節點</span>

判斷節點是否在頁面:

var is_exist = document.getElementsByTagName('div').exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName('span').exist();
alert(is_exist); // true
 
var is_exist = document.getElementsByTagName('p').exist();
alert(is_exist); // false

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

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

可以這麼干

添加原型:

(function($) {
 $.fn.exist = function(){ 
  if($(this).length>=1){
   return true;
  }
  return false;
 };
})(jQuery);

使用方法:
假如頁面有如下DOM節點

<div id="a">這裡是id=a節點</div>
<div>這裡是DIV節點</div>
<div>這裡是DIV節點</div>
<span>這裡是span節點</span>

判斷:

alert($('#aaa').exist()); // false
alert($('#a').exist()); // true
alert($('div').exist()); // true
alert($('p').exist()); // false

以上兩種方法其實都是根據對象集合的length屬性判斷對象是否存在。

本篇文章就是小編為大家帶來的JS/jQuery判斷DOM節點是否存在的簡單方法全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved