Question

在我的指令中，我想从我的DOM访问一个id。我在我的项目中集成了jquery，但问题是我可以访问我想要的DOM的两种方式：

var myEl = angular.element('#divID');

和

var myEl = angular.element(document.querySelector('#divID'));

我的问题是它们之间有什么区别？

Answer 1

angular.element('#divId');正在工作的原因是angular.element是对jQuery的引用（只要jQuery也包含在Angular之前的项目中，否则默认是jQuery lite，它带有一些限制）。调用jQuery(queryString)时的标准行为是返回与传入的queryString匹配的元素的jQuery包装元素列表。

document.querySelector是一个原生浏览器API。随着时间的推移，浏览器实现了越来越多的API。 jQuery的目标之一是与许多浏览器兼容，并允许用户在许多浏览器实现本机document.querySelector之前选择带有查询选择器的元素。

正如您在http://caniuse.com/#feat=queryselector所看到的那样 - document.querySelector现在已被所有主流浏览器本机支持。

但是，在您的情况下，由于您避免浏览器必须解析'#divID'字符串，因此存在第三种且可以说更有效的选项：

var myEl = angular.element(document.getElementById('divID')); // note no #

Answer 2

它也是第一种方式工作的原因是你在AngularJS之前包含了jQuery，所以实际上当你调用angular.element时，angular会返回一个$的实例，你可以使用它angular.element也有选择器。

否则AngularJS有一个jQuery的jQuery内置版本，你需要在angular.element内传递HTML元素才能获得一个jQlite对象，这是一个带有更多属性的标准jQlite对象由AngularJS添加。

此片段包含AngularJS之后的jQuery。在这种情况下，选择器不起作用。

＆＃13;

console.log(angular.element('#test'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  ciao
</div>

＆＃13;

此片段之前包含jQuery，而选择器实际上有效：

＆＃13;

console.log(angular.element('#test'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="test">
  hello
</div>

＆＃13;

P.S。我不知道这是否存在堆栈溢出中实际代码片段引擎的问题，因为我通常使用angular.element传递HTML元素，但我注意到直接使用选择器的性能确实下降了angular.element。即使在AngularJS之前包含jQuery，以下片段也将使用angular.element传递HTML，并且它似乎比前一个运行得非常快。你可以比较它们。但同样，也许它只取决于SO中的当前片段引擎

＆＃13;

console.log(angular.element(document.querySelector('#test')));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="test">
  hello
</div>

＆＃13;

带有和不带`document.querySelector`的angular.element

2 个答案: