資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 TypeScript 中訪問元素
在 TypeScript 中，要訪問元素，或者我們可以稱之為 HTML 元件，我們使用文件物件模型 (DOM)。DOM 定義了一個 HTML 和 XML 程式設計介面，它將文件的結構視覺化為一個節點樹。段落、按鈕、div、標題等只是樹中每個節點代表的文件元素的一些示例。
TypeScript 中的 document 物件充當 DOM 的入口點。這意味著我們可以使用 TypeScript 輕鬆訪問 DOM 的元素。有多種方法可以訪問元素，它們是 -
使用 document.querySelector() 方法
使用 document.getElementById() 方法
使用 document.getElementsByClassName() 方法
使用 document.getElementsByTagName() 方法
在本教程中，我們將討論前兩種方法，即 document.querySelector() 和 document.getElementById() 方法。
使用 getElementById() 方法
document.getElementById() 方法是最常用且主要用於訪問 TypeScript 中 HTML 元素的方法。此方法將使用者要訪問的元素的 id 作為引數，並將元素作為物件形式返回。
例如，如果您有一個 id 為“myDiv”的 HTML 元素，則可以在 TypeScript 中這樣訪問它 -
語法
let myDiv = <HTMLElement>document.getElementById("myDiv");
//Manipulating the element by setting its innerHTML
myDiv.innerHTML = "Hello, World!";
示例
在此示例中，我們有一個 id 為“root”的 HTML div 元素。在指令碼中，我們使用 document.getElementById() 方法透過其 id 訪問此元素。該方法將字串“root”作為引數，並將元素作為物件返回。然後，我們將此物件分配給變數 root。
我們使用了兩個帶有點選事件處理程式的按鈕，這些處理程式分別執行“changeText”和“changeBG”函式。這些函式分別更改元素的 innerHTML 文字和背景顏色。由於 TypeScript 程式碼不能在 HTML 中使用，因此我們需要先編譯它，然後將編譯後的 JavaScript 程式碼與 HTML 一起使用。
TypeScript 程式碼
我們需要在其中編寫 TypeScript 程式碼並進行編譯的檔案。
let root = <HTMLElement>document.getElementById('root')
function changeText() {
root.innerHTML = 'The text is changed!'
}
function changeBG() {
root.style.background = '#b8f0e5'
}
</HTMLElement>
HTML 程式碼
HTML 程式碼是我們定義網頁元素的地方。
<html>
<body>
<h2>Access an <i>Element</i> in TypeScript</h2>
<button onclick="changeText()">Change Text</button>
<button onclick="changeBG()">Change Background Color</button>
<div id="root" style="padding: 10px; background: #f0ecb8">
This is a Div element!
</div>
<script>
//Compiled TypeScript File
var root = document.getElementById('root')
function changeText() {
root.innerHTML = 'The text is changed!'
}
function changeBG() {
root.style.background = '#b8f0e5'
}
</script>
</body>
</html>
如果指定的 id 不存在，則該方法將返回 null，因此在操作返回的元素之前檢查這一點至關重要。
使用 querySelector() 方法
使用 TypeScript 訪問 DOM 元素的另一種方法是使用 querySelector() 和 querySelectorAll() 方法。這些方法透過 CSS 選擇器選擇元素，類似於 jQuery。
語法
const el = <HTMLElement>document.querySelector('#myDiv');
示例
在此示例中，我們使用 querySelector() 方法使用 TypeScript 訪問 HTML 元素。我們使用一個輸入欄位來提供輸入，並嘗試透過訪問輸入欄位和 div 元素在網頁上顯示確切的文字。我們使用了 querySelector() 方法並傳遞了輸入欄位和 div 元素的 id。我們在輸入欄位上添加了一個 on-input 事件屬性，以便在使用者在其中輸入內容時執行一個函式。此函式用於訪問這兩個元素並將 div 的文字更改為輸入欄位上的確切文字。
<html>
<body>
<h2>Access an <i>Element</i> in TypeScript</h2>
<h4>Enter your text:</h4>
<input oninput="changeInput()" id="inputField" type="text" />
<div id="root" style="padding: 10px; background: #d5ed9c"></div>
<script>
//Compiled TypeScript File
var root = document.querySelector('#root')
var inputField = document.querySelector('#inputField')
function changeInput() {
root.innerHTML = inputField.value
}
</script>
</body>
</html>
輸出
請注意，getElementsByClassName、getElementsByTagName 和 getElementsByName 方法也允許您訪問元素，但它們返回元素集合而不是單個元素。
要訪問 TypeScript 中的 HTML 元素，您可以使用 document 物件及其各種方法（例如 getElementById、querySelector 和 querySelectorAll）查詢要訪問的元素，然後根據需要對其進行操作。
13K+ 瀏覽量
