AngularJS 中的 getElementById 和 querySelector
-
AngularJS 中的
document.getElementById
函式是什麼 -
AngularJS 中的
document.querySelector()
函式是什麼 -
AngularJS 中的
angular.element
函式是什麼 -
在 AngularJS 中當
$(target)
工作但angular.element('appBusyIndicator')
不起作用時
在建立 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 框架通常使用其屬性包裝元素。
我們可以通過兩種方式訪問這些屬性:
- 我們可以像這樣使用
$document
方法。
var target = $document('#appBusyIndicator');
- 第二種方法利用了 Angular 元素;這種方法的樂趣在於它針對特定元素。
var targets = angular.element(document).find('div');
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');
這些方法用途廣泛,你可以將它們應用於 div、CSS 類或旋轉控制元件中的目標元素。
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