一文聊聊Angular中怎么操作DOM元素

陆砚码

2026-09-11 • 👁 1人浏览过

angular中怎么操作dom元素？下面本篇文章给大家介绍一下 angular 操作dom元素的方法，希望对大家有所帮助！在angular获取DOM元素可以使用javascript的原生API，或者引入jQuery通过jquery对象操作DOM，但angular已经给我们提供了相应的API（ElementRef）来获取DOM元素，就没必要使用原生的API或者jQuery了。【相关教程推荐：《angular教程》】 ElementRef 获取DOM元素 1、创建

TestComponent

组件，模板如下：

test.component.html


	你好


    世界

标题
组件

2、编写

test.component.ts

文件

import { Component, OnInit } from '@angular/core';
// 1、导入 ElementRef 类
import { ElementRef} from '@angular/core';
import { PassBadge } from './compoment/pass-badge/pass-badge.component'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  declarations: [ PassBadge ]
})
export class TestComponent implements OnInit {
	// 2、将 ElementRef 类注入 test 组件中
    constructor(private el:ElementRef) {}

    ngOnInit() {
    	// 3、获取 DOM 元素
        console.log(this.el.nativeElement)
        console.log(this.el.nativeElement.querySelector('#component'))
    }
}

我们来看看

this.el.nativeElement

是什么所以就可以通过

this.el.nativeElement.querySelector('#component')

来操作对应的DOM元素。例如改变文字颜色就可以

this.el.nativeElement.querySelector('#component').style.color = 'lightblue'

模板变量获取DOM元素可以通过

ViewChild

获取组件，同样的还有

ContentChild

，

ViewChildren

和

ContentChildren

1、修改

TestComponent

组件，为对应元素加上模板变量，如下


    你好



    世界

标题

组件

2、修改

test.component.ts

，如下：

import { Component, OnInit } from '@angular/core';
import { ElementRef} from '@angular/core';
// 2、引入ViewChild
import { ViewChild } from '@angular/core'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    constructor(private el:ElementRef) {}
    // 3、获取元素
    @ViewChild('component') dom: any;
    @ViewChild('div') div: any;
    ngOnInit() {
        console.log(this.dom)	// PassBadgeComponent
        this.dom.fn()   // 调用 passbadge 组件的 fn 方法
        console.log(this.div)	// ElementRef
        this.div.nativeElement.style.color = 'lightblue'	// 文字颜色修改为淡蓝色
    }
}

最终结果如下由结果我们可以知道，当使用

ViewChild

模板变量获取组件元素时，获取到的是组件导出的组件类（上例是

PassBadgeComponent

），这时候只可以操作组件中含有的属性。当使用

ViewChild

模板变量获取html元素时，获取到的时

ElementRef

类型的类，这时可以通过

this.div.nativeElement.querySelector('span')

等原生API来操作元素更多编程相关知识，请访问：编程视频！！

标题

标题

相关文章