Angular中如何操作DOM元素

這篇文章主要介紹“Angular中如何操作DOM元素”，在日常操作中，相信很多人在Angular中如何操作DOM元素問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Angular中如何操作DOM元素”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元環(huán)縣做網(wǎng)站,已為上家服務(wù),為環(huán)縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

在angular獲取DOM元素可以使用javascript的原生API，或者引入jQuery通過(guò)jquery對(duì)象操作DOM，但angular已經(jīng)給我們提供了相應(yīng)的API（ElementRef）來(lái)獲取DOM元素，就沒(méi)必要使用原生的API或者jQuery了?！鞠嚓P(guān)教程推薦：《angular教程》】

ElementRef 獲取DOM元素

1、創(chuàng)建TestComponent組件，模板如下：test.component.html

<div>
	<p>你好</p>
</div>
<div>
    <span>世界</span>
</div>
<h2>標(biāo)題</h2>
<pass-badge id="component" textColor="red">組件</pass-badge>

2、編寫test.component.ts文件

import { Component, OnInit } from '@angular/core';
// 1、導(dǎo)入 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'))
    }
}

我們來(lái)看看this.el.nativeElement是什么

所以就可以通過(guò)this.el.nativeElement.querySelector('#component')來(lái)操作對(duì)應(yīng)的DOM元素。例如改變文字顏色就可以

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

模板變量獲取DOM元素

可以通過(guò)ViewChild獲取組件，同樣的還有ContentChild，ViewChildren和ContentChildren

1、修改TestComponent組件，為對(duì)應(yīng)元素加上模板變量，如下

<div>
    <p>你好</p>
</div>
<!-- 1、給元素加入模板變量 div -->
<div #div>
    <span>世界</span>
</div>
<h2>標(biāo)題</h2>
<!-- 給組件加入模板變量 component -->
<pass-badge #component textColor="red">組件</pass-badge>

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()   // 調(diào)用 passbadge 組件的 fn 方法
        console.log(this.div)	// ElementRef
        this.div.nativeElement.style.color = 'lightblue'	// 文字顏色修改為淡藍(lán)色
    }
}

最終結(jié)果如下

由結(jié)果我們可以知道，當(dāng)使用ViewChild模板變量獲取組件元素時(shí)，獲取到的是組件導(dǎo)出的組件類（上例是PassBadgeComponent），這時(shí)候只可以操作組件中含有的屬性。

當(dāng)使用ViewChild模板變量獲取html元素時(shí)，獲取到的時(shí)ElementRef類型的類，這時(shí)可以通過(guò)this.div.nativeElement.querySelector('span')等原生API來(lái)操作元素

到此，關(guān)于“Angular中如何操作DOM元素”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文題目：Angular中如何操作DOM元素
文章URL：http://muchs.cn/article24/pisice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站營(yíng)銷、移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)