我們知道在angular2中ts文件支持js代碼，為什么用document.getElementById沒法獲取元素節點呢？

其實在angular2中先加載ts文件，再加載view，所以獲取不到節點。

在應用層直接操作 DOM，就會造成應用層與渲染層之間強耦合，導致我們的應用無法運行在不同環境，如 web worker 中，因為在 web worker 環境中，是不能直接操作 DOM。

通過 ElementRef 我們就可以封裝不同平臺下視圖層中的 native 元素 (在瀏覽器環境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 提供的強大的依賴注入特性，我們就可以輕松地訪問到 native 元素。

angular2有生命周期鉤子AfterViewInit可以幫助我們在view加載完之后再執行相應的ts

ts:

import { Component， ElementRef ，AfterViewInit} from '@angular/core';exportclassAppComponent { constructor(privateelementRef: ElementRef) { }ngAfterViewInit() {  let divEle =this.elementRef.nativeElement.querySelector('div');//獲取第一個div  console.dir(divEle);  let div = doxcument.getElementById("div");  //獲取id為‘div'的節點}}

下面有一種優化方案，運用angular內置屬性裝飾器@ViewChild

ts:

import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core';exportclassAppComponent{@ViewChild('greet') greetDiv: ElementRef;ngAfterViewInit() {this.greetDiv.nativeElement.style.backgroundColor ='red'; }}

html:

<div #greet>hello world</div>  //element的標識"#name",@ViewChild根據這個搜索元素

angular中怎么獲取dom元素

步驟分解：

第一步：給要獲取的元素一個ng-model變量，并且綁定事件啦！

代碼如下:
<div class="home" ng-model="dirName"  ng-mouseenter="switchImage($event,dirName)"></div>  //給要獲取的元素一個ng-model變量

第二步：在controller中利用$event.target獲取dom元素即可！

$scope.switchImage = function($event, value) {       3       $($event.target).on("mouseenter mouseleave",function(e) {         var w = $(this).width(); // 得到盒子寬度         var h = $(this).height();// 得到盒子高度         var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);         // 獲取x值         var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);         // 獲取y值         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 　　　　　　　　　　　　//direction的值為“0,1,2,3”分別對應著“上，右，下，左”         // 將點的坐標對應的弧度值換算成角度度數值         var dirName = new Array('上方','右側','下方','左側');         if(e.type == 'mouseenter' && direction == 1){           $(this).find('.profil-photo').html(dirName[direction]+'離開');　　　　　　　　　　　　}else{  　　　　　　　　　　　　　$(this).find('.profil-photo').html(dirName[direction]+'離開'); 　　　　　　　　　　} 　　　　　　　　}); 　　　　　　}