「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

原生JavaScript操作dom

首先我们来看看利用原生JavaScript对dom进行操作，代码比较简单，div里面一行显示文字，js内容就是获取div的id，然后把文字颜色改为红色，具体代码如下：

<div id="domHtml">
    这是原生JavaScript对dom进行操作
</div>
<script>
    let oBox = document.getElementById('domHtml');
    console.log(oBox.innerHTML);
    oBox.style.color = "red"
</script>

在angular中原生操作dom

dom-actions.component.html文件中，这样写：

<div id="box1" *ngIf="flag">
    this is box1
</div>

在创建组件的时候dom-actions.component.ts文件有一个函数ngOnInit，这是angular的生命周期，组件和指令初始化完成，但并不是真正的dom加载完成，如果在这里写会报错。

ngOnInit(): void {
    let oBox1: any = document.getElementById('box1');
    console.log(oBox1.innerHTML);
    oBox.style.color = "blue"
  }

同样的代码放在ngAfterViewInit生命周期函数中可以正常运行：

 ngAfterViewInit(): void {
    let oBox1: any = document.getElementById('box1');
    console.log(oBox1.innerHTML);
    oBox1.style.color = "blue"
  }

在angular中用

首先在dom-actions.component.html文件中定义一个div：

<div #myBox>
    这是一个dom节点
</div>

然后在dom-actions.component.ts文件中进行引入：

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

然后获取dom节点：

@ViewChild('myBox') myBox:any;

最后就是操作dom节点，依旧是在ngAfterViewInit函数中进行操作：

this.myBox.nativeElement.style.width = '300px'
this.myBox.nativeElement.style.height = '50px'
this.myBox.nativeElement.style.background = 'yellow'

最后我们来看看实现效果吧：

angular生命周期函数

简单介绍一下刚刚提到的两个生命周期函数，后面再研究其他生命周期函数。

ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。而且即使没有调用过 ngOnChanges()，也仍然会调用 ngOnInit()（比如当模板中没有绑定任何输入属性时）。

ngAfterViewInit()

当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。

angular操作dom