獲取DOM可能會(huì)使用原生的(如：document.getElementById('id'))；或者引入Jquery獲取jquery對(duì)象獲取元素嫌拣。但在angular中千萬(wàn)別這么使用~~~因?yàn)楣倬W(wǎng)API給我們提供更好的方法颜骤。

1.ElementRef

從官網(wǎng)可以看出唧喉，通過(guò) ElementRef 我們就可以封裝不同平臺(tái)下視圖層中的 native 元素 (在瀏覽器環(huán)境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 2 提供的強(qiáng)大的依賴注入特性八孝，我們就可以輕松地訪問(wèn)到 native 元素董朝。

例子：

<div style="width:100px;height:100px;border:1px solid red" class="btn1">按鈕一</div>
<p>了解ElementRef</p>

import { ElementRef} from '@angular/core';
  constructor( private el:ElementRef){}
  ngOnInit(){
    console.log(this.el.nativeElement);
    this.el.nativeElement.querySelector('.btn1').style.height = '300px';
  }

我們來(lái)看看打印出來(lái)的this.el.nativeElement是什么？

image.png

可以看到nativeElement其實(shí)包含的是組件中所有的DOM元素干跛。如果想獲取頁(yè)面某個(gè)元素子姜，可以使用querySelector獲取某個(gè)元素或者querySelectorAll獲取多個(gè)元素。

但是我們要盡量減少應(yīng)用層與渲染層之間強(qiáng)耦合關(guān)系楼入，從而讓我們應(yīng)用能夠靈活地運(yùn)行在不同環(huán)境哥捕。怎么做了？我們需要renderer2

【在Angular4中renderer已經(jīng)廢棄掉了嘉熊，變成了renderer2遥赚。】

2.Renderer2

<div style="width:100px;height:100px;border:1px solid red" class="btn1">按鈕一</div>
<p>了解ElementRef</p>

修改我們的js如下

import {ElementRef,OnInit,Renderer2} from '@angular/core';
  constructor( 
    private el:ElementRef,
    private renderer2: Renderer2){}
  ngOnInit(){
    console.log(this.el.nativeElement);
    //this.el.nativeElement.querySelector('.btn1').style.height = '300px';
    this.renderer2.setStyle(this.el.nativeElement.querySelector('.btn1'),'background','green')
  }

image.png

關(guān)于Renderer2的更多API：

abstract class Renderer2 {
  abstract get data: {...}
  destroyNode: ((node: any) => void) | null
  abstract destroy(): void
  abstract createElement(name: string, namespace?: string | null): any
  abstract createComment(value: string): any
  abstract createText(value: string): any
  abstract appendChild(parent: any, newChild: any): void
  abstract insertBefore(parent: any, newChild: any, refChild: any): void
  abstract removeChild(parent: any, oldChild: any): void
  abstract selectRootElement(selectorOrNode: string | any): any
  abstract parentNode(node: any): any
  abstract nextSibling(node: any): any
  abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void
  abstract removeAttribute(el: any, name: string, namespace?: string | null): void
  abstract addClass(el: any, name: string): void
  abstract removeClass(el: any, name: string): void
  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void
  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void
  abstract setProperty(el: any, name: string, value: any): void
  abstract setValue(node: any, value: string): void
  abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void
}

詳細(xì)官網(wǎng)鏈接

3.ViewChild(屬性裝飾器)

可以使用ViewChild從視圖DOM中獲取匹配選擇器的第一個(gè)元素或指令阐肤。如果視圖DOM發(fā)生變化凫佛，并且新的子項(xiàng)與選擇器匹配，則屬性將被更新泽腮。在ngAfterViewInit調(diào)用回調(diào)之前設(shè)置御蒲。

可以根據(jù)模板引用變量獲取DOM

直接上代碼吧：

<div style="width:100px;height:100px;border:1px solid red" class="btn1">按鈕一</div>
<!--模板變量名-->
<div style="width:100px;height:100px;" #div3>按鈕三</div>
<p>了解ElementRef</p>

import { ElementRef,OnInit,Renderer2,ViewChild} from '@angular/core';
  @ViewChild('div3') div3:ElementRef;
  constructor( 
    private el:ElementRef,
    private renderer2: Renderer2){}
  ngOnInit(){
    console.log(this.el.nativeElement);
    //this.el.nativeElement.querySelector('.btn1').style.height = '300px';
    this.renderer2.setStyle(this.el.nativeElement.querySelector('.btn1'),'background','green');
    console.log('ViewChild獲取匹配的元素:')
    console.log(this.div3.nativeElement);
    this.renderer2.setStyle(this.div3.nativeElement,'background','red');
  }