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