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’);