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操作，

连接地址：/api/core/Renderer2#selectRootElement