angular获取DOM元素的三种方式

最新推荐文章于 2025-02-18 11:40:02 发布

gaiery

最新推荐文章于 2025-02-18 11:40:02 发布

阅读量1w

点赞数 8

分类专栏： Angular 操作DOM 文章标签： css vue.js javascript

本文链接：https://blog.youkuaiyun.com/gaiery/article/details/118246163

版权

Angular 同时被 2 个专栏收录

6 篇文章

订阅专栏

操作DOM

1 篇文章

订阅专栏

本文介绍了Angular中如何避免直接操作DOM，重点讲解了 ViewChild、ElementRef和Renderer2的使用，展示了通过模板变量获取DOM元素、设置属性以及Renderer2进行元素选择的示例，强调了最佳实践是结合指令操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular中在’@angular/core’库中通过提供Renderer2和ElementRef中实现了有关于DOM的操作，但是，angular中不推荐直接操作dom元素，通过变量结合内置指令是当前操作DOM的最好实践

获取DOM元素

通过模板变量名获取单个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);
    }
}