在 Angular 中使用 TypeScript 的 getElementById 替換
-
TypeScript 中的
document.getElementById()
方法 -
在 Angular 中使用 TypeScript 使用
ElementRef
作為getElementById
替換
本教程指南提供了使用 TypeScript 在 Angular 中替換 document.getElementById
的簡要說明。
這還通過程式碼示例提供了用於在 Angular 中 getElementById
的最佳方法。我們還將瞭解 TypeScript 中 DOM querySelector 的用途。
首先,讓我們瞭解一下 TypeScript 中的 document.getElementById
方法以及它在開發人員社群中流行的原因。
TypeScript 中的 document.getElementById()
方法
document.getElementById()
是一個預定義的 JavaScript(以及 TypeScript)方法,可用於操作 document
物件。它返回一個具有指定值的元素,如果該元素不存在,則返回 null
。
document.getElementById()
是開發人員社群中用於 HTML DOM 的最常見和流行的方法之一。
要記住的一個重要點是,如果兩個或多個元素具有相同的 id,document.getElementById()
將返回第一個元素。
現在,讓我們看一些編碼示例,以更好地瞭解它們的目的和用法。
考慮帶有一些具有唯一 demo
id 的文字的 h1
標籤。現在,在 scripts
部分中,如果我們想要針對特定標籤,我們使用 document
物件中可用的 getElementById()
方法。
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>
<script>
document.getElementById("demo").style.color = "red";
</script>
</body>
</html>
輸出:
現在讓我們考慮一個更動態的例子:一個輸入欄位接受一個數字並返回它的立方值。
<!DOCTYPE html>
<html>
<body>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
<script>
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</body>
</html>
輸出:
現在,讓我們看看使用 TypeScript 在 Angular 中的 getElementById
替換。
在 Angular 中使用 TypeScript 使用 ElementRef
作為 getElementById
替換
AngularJs 的 ElementRef
是 HTML 元素的包裝器,包含屬性 nativeElement
並儲存對底層 DOM 物件的引用。使用 ElementRef
,我們可以使用 TypeScript 在 AngularJs 中操作 DOM。
通過使用 ViewChild
,我們可以在元件類中獲取 HTML 元素的 ElementRef
。Angular 允許在建構函式中請求元件的指令元素時注入 ElementRef
。
使用 @ViewChild
裝飾器,我們使用類中的 ElementRef
介面來獲取元素引用。
考慮以下 main.component.html
檔案中 AngularJs
中的程式碼示例。我們有一個帶有事件的按鈕和一個具有唯一 ID myName
的 div:
# angular
<div #myName></div>
<button (click)="getData()">Get Value</button>
輸出:
示例 1(app.component.ts
):
#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./main.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@ViewChild("myName") myName: ElementRef;
getData() {
console.log(this.myName);
this.myName.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
}
}
輸出:
使用 @ViewChild
裝飾器,我們在類中的 ElementRef
介面的幫助下獲取輸入的引用。然後,我們使用帶有此引用的 getData()
函式更改其值。
示例 2(app.component.ts
):
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
name = "Angular";
@ViewChild("ipt", { static: true }) input: ElementRef;
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
onClick() {
this.input.nativeElement.value = "test!";
}
}
輸出:
這將獲取輸入欄位的引用並在單擊按鈕時更改其內部文字。
Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.
LinkedIn