getElementById und querySelector in AngularJS
-
Was ist die Funktion
document.getElementById
in AngularJS -
Was ist die Funktion
document.querySelector()
in AngularJS -
Was ist die
angular.element
-Funktion in AngularJS -
Wenn
$(target)
funktioniert, aberangular.element('appBusyIndicator')
in AngularJS nicht funktioniert
![getElementById und querySelector in AngularJS](/img/Angular/feature-image---angular-getdocumentbyid-vs-queryselector.webp)
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:
- Wir können die Methode
$document
so verwenden.
var target = $document('#appBusyIndicator');
- 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.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn