angular.element vs document.querySelector

Benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app>
    <div id="col1" ng-controller="MyCtrl" class="column" ng-init="gkey='group1'" data-gkey="group1"></div>
</div>

Setup

var MyCtrl;
        MyCtrl = function($scope) {
          $scope.gkey = 'group1';
        };
    
    function FindWithAngular(gkey) {
        var e;
        angular.forEach(document.querySelectorAll('.column'), function(v) {
            if(angular.element(v).scope.gkey === gkey) e = v;
        });
        return e;
    }
    
    function FindWithDOM(gkey) {
        return document.querySelector('#col1[data-gkey="'+gkey+'"]')
    }

Test runner

Ready to run.

Testing in
TestOps/sec
angular.element
var g = FindWithAngular('group1');
ready
document.querySelector
var g = FindWithDOM('group1');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.