getElementById y querySelector en AngularJS

1. ¿Qué es la función document.getElementById en AngularJS?
2. ¿Qué es la función document.querySelector() en AngularJS?
3. ¿Qué es la función angular.element en AngularJS?
4. Cuando $(target) funciona pero angular.element('appBusyIndicator') no funciona en AngularJS

Al crear aplicaciones web, hay situaciones en las que una sección particular de la página web se comporta de una manera específica cuando se realiza una acción. Por ejemplo, es posible que necesitemos cambiar una imagen en particular en la página web o voltearla después de unos segundos o hacer clic en un botón.

Hay tres funciones en Angular que se utilizan mejor para manipular elementos de páginas web; estos son angular.element, document.getElementById y querySelector().

Cuando llamamos a estas funciones para la manipulación de DOM, comúnmente se encuentran algunos problemas, pero antes de sumergirnos en eso, familiaricémonos con el significado de estas funciones.

¿Qué es la función document.getElementById en AngularJS?

La función document.getElementById le permite seleccionar específicamente una identificación HTML y manipularla a su gusto. Es la función más compatible y se carga más rápido en comparación con otras funciones de manipulación de DOM.

¿Qué es la función document.querySelector() en AngularJS?

Mientras que la función document.getElementById apunta a una identificación específica, la función document.querySelector() apunta a los elementos CSS en una página web, por ejemplo, las etiquetas a y p en el HTML.

Esta función se carga más lentamente que la anterior y es menos compatible, pero se usa mejor para manipulaciones HTML complejas. Si surge la necesidad de más de un elemento CSS, se llamará a la función document.querySelectorAll().

¿Qué es la función angular.element en AngularJS?

Angular.element ayuda a su código en múltiples marcos. Esta función se vuelve útil cuando tenemos un código para trabajar en otros marcos como React y Vue.

Cuando $(target) funciona pero angular.element('appBusyIndicator') no funciona en AngularJS

Ahora que tenemos una idea de las tres funciones y lo que pueden hacer, veamos los problemas que probablemente encontraremos.

Los arreglos de código como a continuación funcionan perfectamente en Angular.

$(target).fadeIn('fast')

Pero esto no funcionaría.

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

Este problema ocurre porque la función angular.element no puede funcionar por completo. Si bien es una función Angular, necesita envolver un fragmento de código jQuery antes de que cobre vida.

Me gusta esto:

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

Como se explicó anteriormente, envolvimos document.querySelector() con angular.element para que la función funcione.

No se puede acceder al contenido de un elemento en AngularJS

Hay casos en los que queremos obtener el valor original en un elemento cuando los usuarios han realizado una entrada. Se debe principalmente a que el marco Angular generalmente envuelve el elemento con sus propiedades.

Podemos acceder a estas propiedades de dos formas:

1. Podemos usar el método $document así.

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

2. El segundo método utiliza el elemento Angular; la alegría de este método es que apunta a elementos específicos.

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

Estos métodos son versátiles, ya que puede aplicarlos a elementos de destino en un div, una clase CSS o controles giratorios.