angular.element有和沒有`document.querySelector`

Question

在我的指令裏面我想從我的DOM訪問一個id。我綜合的jQuery在我的項目，但問題是雙向的，我可以訪問我的期望DOM：

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

和

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

我的問題是它們之間有什麼區別呢？

Answer 1

爲什麼它的工作也是在第一種方式的原因是，你在AngularJS之前包含了jQuery，所以實際上當你調用angular.element角度返回給你一個$的實例時，你也可以通過選擇器使用angular.element。

否則AngularJS有jQuery的內置版本，它是jQlite，並且您需要傳遞angular.element中的HTML元素以獲取jQlite對象，這是一個標準的jQlite對象，其中還包含AngularJS添加的更多屬性。

這段代碼包含了AngularJS之後的jQuery。在這種情況下，該選擇器不起作用。

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

<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>

這個片段包括jQuery的，而不是之前，和選擇的實際工作：

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

<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>

附：我不知道這是否是堆棧溢出中的實際代碼片段引擎的問題，因爲我通常使用angular.element傳遞HTML元素，但我注意到直接使用angular.element的選擇器會降低性能。 即使jQuery包含在AngularJS之前，下面的代碼片段也會使用傳遞HTML的angular.element，而且它看起來確實比上一個更快。你可以比較它們。但同樣的，也許它只是取決於當前片斷引擎SO

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

<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>

Answer 2

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 #