前言

    angular中在’@angular/core’庫中通過提供Renderer2和ElementRef中實現了有關於DOM的操作，但是，angular中不推薦直接操作dom元素，通過變數結合內建指令是當前操作DOM的最好實踐

獲取DOM元素

    1、通過模板變數名獲取單個DOM元素

        @ViewChild 通過模板變數名獲取DOM元素
        ViewChild是屬性裝飾器，用來從模板檢視中獲取匹配的元素。檢視查詢在 ngAfterViewInit 鉤子函式呼叫前完成，因此在ngAfterViewInit鉤子函式中，才能正確獲取查詢的元素。

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p #greet>Hello {{ name }}</p>
  `,
})
export class AppComponent {
  name: string = 'Semlinker';

  @ViewChild('greet')
  greetDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.greetDiv.nativeElement);
  }
}
 

    2、通過ElementRef獲取DOM元素

        通過css選擇器獲取單個DOM 並設定屬性

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

        通過css選擇器獲取多個DOM 並設定屬性

import { ElementRef} from '@angular/core';
export class AppComponent {
  constructor( private el:ElementRef){}
  ngOnInit(){
    console.log(this.el.nativeElement);
    this.el.nativeElement.querySelectorAll('.btn').forEach(element =>{
    		element.style.height = '300px';
    })
  }
}

    3、通過Renderer2獲取元素

import { Renderer2} from '@angular/core';
export class AppComponent {
  constructor( private render2: Renderer2){}
  ngOnInit(){
    const child = this.render2.selectRootElement(".div1");
        console.log(child);
    }
}

操作DOM元素