迹忆客 专注技术分享

在创建 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 类或旋转控件中的目标元素。