ホームページ > ウェブフロントエンド > jsチュートリアル > javascriptとjqueryを使ってdomノードの存在を検出する方法例を詳しく解説

javascriptとjqueryを使ってdomノードの存在を検出する方法例を詳しく解説

伊谢尔伦
リリース: 2017-07-20 11:46:15
オリジナル
1120 人が閲覧しました

1. JavaScript はページ内に DOM ノードが存在するかどうかを判断します

JavaScript のネイティブ関数には、DOM ノードが存在するかどうかを判断するメソッドがありません。通常、オブジェクトを返す document.getElement.. メソッドを通じて DOM ノードを取得します。配列セットを渡すことができます。 object[0]、object[1] は、このコレクション内の各オブジェクトにアクセスするために使用されます。配列セットが返されるため、長さ属性があり、長さが 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
ログイン後にコピー

上記 2 つのメソッドは、実際にはオブジェクト コレクションの長さ属性に基づいてオブジェクトが存在するかどうかを判断します。

以上がjavascriptとjqueryを使ってdomノードの存在を検出する方法例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート