getElementById et querySelector dans AngularJS

1. Qu’est-ce que la fonction document.getElementById dans AngularJS
2. Qu’est-ce que la fonction document.querySelector() dans AngularJS
3. Qu’est-ce que la fonction angular.element dans AngularJS
4. Lorsque $(target) fonctionne mais angular.element('appBusyIndicator') ne fonctionne pas dans AngularJS

Lors de la création d’applications Web, il existe des situations où une section particulière de la page Web s’exécute d’une manière spécifique lorsqu’une action est entreprise. Par exemple, nous pourrions avoir besoin d’une image particulière sur la page Web pour changer ou retourner après quelques secondes ou cliquer sur un bouton.

Il existe trois fonctions sur Angular qui sont mieux utilisées pour manipuler des éléments de page Web. ce sont angular.element, document.getElementById et querySelector().

Lorsque nous appelons ces fonctions pour la manipulation du DOM, certains problèmes sont couramment rencontrés, mais avant de plonger dans cela, familiarisons-nous avec la signification de ces fonctions.

Qu’est-ce que la fonction document.getElementById dans AngularJS

La fonction document.getElementById vous permet de sélectionner spécifiquement un identifiant HTML et de le manipuler à votre guise. C’est la fonction la plus prise en charge et elle se charge le plus rapidement par rapport aux autres fonctions de manipulation du DOM.

Qu’est-ce que la fonction document.querySelector() dans AngularJS

Alors que la fonction document.getElementById cible un identifiant spécifique, la fonction document.querySelector() cible les éléments CSS d’une page Web, par exemple les balises a et p dans le HTML.

Cette fonction se charge plus lentement que la précédente et est moins prise en charge, mais elle est mieux utilisée pour les manipulations HTML complexes. Si le besoin s’en fait sentir lorsque plus d’un élément CSS est ciblé, la fonction document.querySelectorAll() sera appelée à la place.

Qu’est-ce que la fonction angular.element dans AngularJS

Angular.element aide votre code sur plusieurs frameworks. Cette fonction devient pratique lorsque nous avons un code pour travailler sur d’autres frameworks comme React et Vue.

Lorsque $(target) fonctionne mais angular.element('appBusyIndicator') ne fonctionne pas dans AngularJS

Maintenant que nous avons une idée des trois fonctions et de ce qu’elles peuvent faire, examinons les problèmes que nous rencontrerons probablement.

Les arrangements de code comme ci-dessous fonctionnent parfaitement dans Angular.

$(target).fadeIn('fast')

Mais cela ne fonctionnerait pas.

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

Ce problème survient car la fonction angular.element ne peut pas fonctionner entièrement. Bien qu’il s’agisse d’une fonction Angular, elle doit envelopper un extrait de code jQuery avant de prendre vie.

Comme ça:

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

Comme expliqué ci-dessus, nous avons enveloppé document.querySelector() avec angular.element pour que la fonction fonctionne.

Impossible d’accéder au contenu d’un élément dans AngularJS

Il y a des cas où nous voulons obtenir la valeur d’origine dans un élément lorsque les utilisateurs ont fait une entrée. C’est principalement parce que le framework Angular enveloppe généralement l’élément avec ses propriétés.

Nous pouvons accéder à ces propriétés de deux manières :

1. Nous pouvons utiliser la méthode $document comme celle-ci.

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

2. La deuxième méthode utilise l’élément Angular ; la joie de cette méthode est qu’elle cible des éléments spécifiques.

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

Ces méthodes sont polyvalentes car vous pouvez les appliquer à des éléments cibles dans un div, une classe CSS ou des contrôles spin.