AngularJS 中的 getElementById 和 querySelector

在建立 Web 應用程式時，在某些情況下，網頁的特定部分在執行操作時會以特定方式執行。例如，我們可能需要網頁上的特定圖片在幾秒鐘後更改或翻轉或單擊按鈕。

Angular 上有三個函式最適合用來操作網頁元素；它們是 angular.element、document.getElementById 和 querySelector()。

當我們呼叫這些函式進行 DOM 操作時，通常會遇到一些問題，但在深入探討之前，讓我們先熟悉一下這些函式的含義。

AngularJS 中的 document.getElementById 函式是什麼

document.getElementById 函式允許你專門選擇一個 HTML id 並根據自己的喜好操作它們。它是最受支援的功能，與其他 DOM 操作功能相比，它載入速度最快。

AngularJS 中的 document.querySelector() 函式是什麼

document.getElementById 函式以特定 id 為目標，而 document.querySelector() 函式以網頁中的 CSS 元素為目標，例如 HTML 中的 a 和 p 標籤。

此函式的載入速度比前者慢且支援較少，但它更適合用於複雜的 HTML 操作。如果需要針對多個 CSS 元素進行定位，則將呼叫 document.querySelectorAll() 函式。

AngularJS 中的 angular.element 函式是什麼

Angular.element 幫助你的程式碼在多框架上。當我們有程式碼可以在 React 和 Vue 等其他框架上工作時，這個函式會變得很方便。

在 AngularJS 中當 $(target) 工作但 angular.element('appBusyIndicator') 不起作用時

現在我們已經瞭解了這三個函式以及它們可以做什麼，讓我們看看我們可能會遇到的問題。

像下面這樣的程式碼安排在 Angular 中完美執行。

$(target).fadeIn('fast')

但這行不通。

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

出現此問題是因為 angular.element 函式無法完全工作。雖然它是一個 Angular 函式，但它需要在它生效之前包裝一個 jQuery 程式碼片段。

像這樣：

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

如上所述，我們用 angular.element 包裝 document.querySelector() 以使函式工作。

無法訪問 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 類或旋轉控制元件中的目標元素。