AngularJS의 getElementById 및 querySelector

1. AngularJS의 document.getElementById 기능이란?
2. AngularJS의 document.querySelector() 함수란?
3. AngularJS의 angular.element 기능이란
4. $(target)이 작동하지만 angular.element('appBusyIndicator')가 AngularJS에서 작동하지 않는 경우

웹 응용 프로그램을 만들 때 웹 페이지의 특정 섹션이 작업을 수행할 때 특정 방식으로 수행되는 상황이 있습니다. 예를 들어, 몇 초 후에 변경하거나 뒤집거나 버튼을 클릭하기 위해 웹 페이지의 특정 그림이 필요할 수 있습니다.

Angular에는 웹 페이지 요소를 조작하는 데 가장 잘 사용되는 세 가지 기능이 있습니다. 이들은 angular.element, document.getElementById 및 querySelector()입니다.

DOM 조작을 위해 이러한 함수를 호출할 때 일반적으로 몇 가지 문제가 발생하지만 이에 대해 알아보기 전에 이러한 함수의 의미에 익숙해지도록 합시다.

AngularJS의 document.getElementById 기능이란?

document.getElementById 기능을 사용하면 HTML ID를 구체적으로 선택하고 원하는 대로 조작할 수 있습니다. 가장 많이 지원되는 기능이며, 다른 DOM 조작 기능에 비해 로딩이 가장 빠릅니다.

AngularJS의 document.querySelector() 함수란?

document.getElementById 함수는 특정 ID를 대상으로 하는 반면 document.querySelector() 함수는 HTML의 a 및 p 태그와 같은 웹 페이지의 CSS 요소를 대상으로 합니다.

이 함수는 전자보다 로드가 느리고 덜 지원되지만 복잡한 HTML 조작에 더 잘 사용됩니다. 둘 이상의 CSS 요소를 대상으로 해야 하는 경우 document.querySelectorAll() 함수가 대신 호출됩니다.

AngularJS의 angular.element 기능이란

Angular.element는 다중 프레임워크에서 코드를 돕습니다. 이 함수는 React 및 Vue와 같은 다른 프레임워크에서 작업할 코드가 있을 때 편리합니다.

$(target)이 작동하지만 angular.element('appBusyIndicator')가 AngularJS에서 작동하지 않는 경우

이제 우리는 세 가지 기능에 대한 아이디어와 그들이 할 수 있는 일에 대해 알았으므로 직면하게 될 문제를 살펴보겠습니다.

아래와 같은 코드 배열은 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 프레임워크가 일반적으로 요소를 속성으로 래핑하기 때문입니다.

두 가지 방법으로 이러한 속성에 액세스할 수 있습니다.

1. 이와 같이 $document 메소드를 사용할 수 있습니다.

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

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 클래스 또는 스핀 컨트롤의 대상 요소에 적용할 수 있으므로 다목적입니다.