AngularJS の getElementById と querySelector

1. AngularJS の document.getElementById 関数とは
2. AngularJS の document.querySelector() 関数とは
3. AngularJS の angular.element 関数とは
4. $(target) は機能するが angular.element('appBusyIndicator') が AngularJS で機能しない場合

Web アプリケーションを作成する場合、アクションが実行されたときに Web ページの特定のセクションが特定の方法で実行される状況があります。たとえば、数秒後に変更または反転したり、ボタンをクリックしたりするには、Web ページ上の特定の画像が必要になる場合があります。

Angular には、Web ページ要素を操作するために最適に使用される 3つの関数があります。これらは、angular.element、document.getElementById、および querySelector() です。

これらの関数を DOM 操作のために呼び出すと、一般的にいくつかの問題が発生しますが、それに飛び込む前に、これらの関数の意味を理解しましょう。

AngularJS の document.getElementById 関数とは

document.getElementById 関数を使用すると、HTML ID を具体的に選択して、好みに合わせて操作できます。これは最もサポートされている関数であり、他の DOM 操作関数と比較して最も高速にロードされます。

AngularJS の document.querySelector() 関数とは

document.getElementById 関数は特定の ID をターゲットにしますが、document.querySelector() 関数は Web ページの CSS 要素（たとえば、HTML の a および p タグ）をターゲットにします。

この関数は前者よりも読み込みが遅く、サポートも不十分ですが、複雑な HTML 操作に適しています。複数の CSS 要素を対象とする必要が生じた場合は、代わりに document.querySelectorAll() 関数が呼び出されます。

AngularJS の angular.element 関数とは

Angular.element は、マルチフレームワークでのコードに役立ちます。この関数は、React や Vue などの他のフレームワークで動作するコードがある場合に便利です。

$(target) は機能するが angular.element('appBusyIndicator') が AngularJS で機能しない場合

3つの関数とそれらが何を実行できるかがわかったので、発生する可能性のある問題を見てみましょう。

以下のようなコード配置は、Angular で完全に機能します。

$(target).fadeIn('fast')

しかし、これは機能しません。

angular.element('#appBusyIndicator').fadeIn('fast')

この問題は、angular.element 関数が完全に機能できないために発生します。これは Angular 関数ですが、有効になる前に jQuery コードスニペットをラップする必要があります。

このような：

var myElement = angular.element( document.querySelector( '#some-id' ) );

上で説明したように、関数を機能させるために、document.querySelector() を angular.element でラップしました。

AngularJS の要素のコンテンツにアクセスできません

ユーザーが入力を行ったときに、要素の元の値を取得したい場合があります。これは主に、Angular フレームワークが通常要素をそのプロパティでラップするためです。

これらのプロパティには、次の 2つの方法でアクセスできます。

1. このような $document メソッドを使用できます。

var target = $document('#appBusyIndicator');

2. 2 番目の方法は、Angular 要素を利用します。この方法の喜びは、特定の要素を対象としていることです。

var targets = angular.element(document).find('div');
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

これらのメソッドは、div、CSS クラス、またはスピンコントロールのターゲット要素に適用できるため、用途が広いです。