AngularJS 中的 getElementById 和 querySelector

Oluwafisayo Oluwatayo 2023年1月30日 2022年4月20日
  1. AngularJS 中的 document.getElementById 函式是什麼
  2. AngularJS 中的 document.querySelector() 函式是什麼
  3. AngularJS 中的 angular.element 函式是什麼
  4. 在 AngularJS 中當 $(target) 工作但 angular.element('appBusyIndicator') 不起作用時
AngularJS 中的 getElementById 和 querySelector

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

Angular 上有三個函式最適合用來操作網頁元素;它們是 angular.elementdocument.getElementByIdquerySelector()

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

AngularJS 中的 document.getElementById 函式是什麼

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

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

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

此函式的載入速度比前者慢且支援較少,但它更適合用於複雜的 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');
  1. 第二種方法利用了 Angular 元素;這種方法的樂趣在於它針對特定元素。
var targets = angular.element(document).find('div');
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

這些方法用途廣泛,你可以將它們應用於 div、CSS 類或旋轉控制元件中的目標元素。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

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

相關文章 - Angular Element