Angular.element和$document的使用方法分析，代替jquery

AngularJs是不直接操做DOM的，可是在平时的开发当中，咱们有的时候仍是须要操做一些DOM的，若是使用原生的JS的话操做过于麻烦，因此你们通常都是使用jQuery，jQuery虽然好用，可是AngularJs是不建议和JQuery同时使用的，因此AngularJs给咱们也提供了一些操做DOM的方法———Jqlite

下面以addClass（）方法为例给你们讲解一下Jqlite的使用：

查阅官方提供的api，能够看到使用方法是angular.element(ele)，其中，容许传入的参数ele的类型是“HTML string or DOMElement to be wrapped into jQuery.”通常传入参数DOMElement

方法一：

var test = angular.element(document.querySelector(‘#testId’));
test.addClass(‘testClass’);

以原生js的document对象的querySelector方法获取元素的id，括号内的使用方法同jquery一致，#表明id，该方法返回的是当前div的DOMElement对象，经过angular.element方法便可将即转化为一个jQuery对象，从而对其操做。

方法二：

var test = angular.element(document.getElementById(‘test’);
test.addClass(‘testClass’);

getElementById的方法相信你们用到的比较多，其返回的也是一个DOMElement对象

方法三：

angular.forEach(angular.element(document).find('div'),function(node){
            if(node.id == 'testId'){
                     node.addClass('testClass');
            }
if(node.className == ‘testClass’){
node.removeClass(‘testClass’)
}
           })

find搜索的是tagName，这里使用的是div，固然也能够是p标签等等。

方法四：使用$documen

注：不要忘记注入

$document就和angular.element(document)是同样的，是一个总体的dom结构树，包含jqlite的全部方法，因此方法三也能够改成：

angular.forEach($document.find('div'),function(node){
            if(node.id == 'testId'){
                     node.addClass('testClass');
            }
if(node.className == ‘testClass’){
node.removeClass(‘testClass’)
}
           })

另外$document[0]和原生JS的document等效

因此，方法一和方法二能够改成

var test = angular.element($document[0].getElementById(‘test’);
test.addClass(‘testClass’);

以及

var test = angular.element($document[0].getElementById(‘test’);
test.addClass(‘testClass’);