getElementById und querySelector in AngularJS

1. Was ist die Funktion document.getElementById in AngularJS
2. Was ist die Funktion document.querySelector() in AngularJS
3. Was ist die angular.element-Funktion in AngularJS
4. Wenn $(target) funktioniert, aber angular.element('appBusyIndicator') in AngularJS nicht funktioniert

Beim Erstellen von Webanwendungen gibt es Situationen, in denen sich ein bestimmter Abschnitt der Webseite auf eine bestimmte Weise verhält, wenn eine Aktion ausgeführt wird. Beispielsweise benötigen wir möglicherweise ein bestimmtes Bild auf der Webseite, um es nach einigen Sekunden zu ändern oder umzudrehen oder auf eine Schaltfläche zu klicken.

Es gibt drei Funktionen in Angular, die am besten zum Bearbeiten von Webseitenelementen verwendet werden. diese sind angular.element, document.getElementById und querySelector().

Wenn wir diese Funktionen für die DOM-Manipulation aufrufen, treten häufig einige Probleme auf, aber bevor wir uns damit befassen, machen wir uns mit der Bedeutung dieser Funktionen vertraut.

Was ist die Funktion document.getElementById in AngularJS

Mit der Funktion document.getElementById können Sie gezielt eine HTML-ID auswählen und nach Belieben manipulieren. Es ist die am meisten unterstützte Funktion und lädt im Vergleich zu anderen DOM-Manipulationsfunktionen am schnellsten.

Was ist die Funktion document.querySelector() in AngularJS

Während die Funktion document.getElementById auf eine bestimmte ID abzielt, zielt die Funktion document.querySelector() auf die CSS-Elemente einer Webseite ab, beispielsweise die Tags a und p im HTML.

Diese Funktion lädt langsamer als die vorherige und wird weniger unterstützt, wird aber besser für komplexe HTML-Manipulationen verwendet. Wenn mehr als ein CSS-Element anvisiert wird, wird stattdessen die Funktion document.querySelectorAll() aufgerufen.

Was ist die angular.element-Funktion in AngularJS

Angular.element hilft Ihrem Code auf Multi-Frameworks. Diese Funktion wird praktisch, wenn wir einen Code haben, um an anderen Frameworks wie React und Vue zu arbeiten.

Wenn $(target) funktioniert, aber angular.element('appBusyIndicator') in AngularJS nicht funktioniert

Nachdem wir nun eine Vorstellung von den drei Funktionen und ihren Möglichkeiten haben, schauen wir uns die Probleme an, auf die wir wahrscheinlich stoßen werden.

Codeanordnungen wie unten funktionieren perfekt in Angular.

$(target).fadeIn('fast')

Aber das würde nicht funktionieren.

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

Dieses Problem tritt auf, weil die Funktion angular.element nicht vollständig funktionieren kann. Obwohl es sich um eine Angular-Funktion handelt, muss sie ein jQuery-Code-Snippet umschließen, bevor sie zum Leben erweckt wird.

So was:

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

Wie oben erklärt, haben wir document.querySelector() mit angular.element umschlossen, damit die Funktion funktioniert.

Zugriff auf den Inhalt eines Elements in AngularJS nicht möglich

Es gibt Fälle, in denen wir den ursprünglichen Wert in einem Element erhalten möchten, wenn Benutzer eine Eingabe gemacht haben. Dies liegt hauptsächlich daran, dass das Angular-Framework das Element normalerweise mit seinen Eigenschaften umschließt.

Wir können auf diese Eigenschaften auf zwei Arten zugreifen:

1. Wir können die Methode $document so verwenden.

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

2. Die zweite Methode verwendet das Angular-Element; Das Schöne an dieser Methode ist, dass sie auf bestimmte Elemente abzielt.

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

Diese Methoden sind vielseitig, da Sie sie auf Zielelemente in einem div, einer CSS-Klasse oder Spin-Steuerelementen anwenden können.