Angular2+ 获取、操作DOM元素

前言

    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元素

在angular中提供的Renderer2中，有关DOM元素的增删改查、class、style操作，
连接地址：https://angular.cn/api/core/Renderer2#selectRootElement