存取類型腳本中的元素-js教程-PHP中文網

首頁

web前端

js教程

存取類型腳本中的元素

PHPz

Aug 24, 2023 pm 06:45 PM

存取類型腳本中的元素

在 TypeScript 中，為了存取元素，或者我們可以說 HTML 元件，我們使用文件物件模型 (DOM)。 DOM 定義了 HTML 和 XML 程式設計接口，將文件結構視覺化為節點樹。段落、按鈕、div、標題等只是樹中每個節點所代表的文件元素的幾個範例。

TypeScript 中的文件物件充當 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 程式碼並進行編譯的檔案。

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 id="Access-an-i-Element-i-in-TypeScript">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。我們在輸入欄位上新增了一個輸入事件屬性，以便在使用者對其進行輸入時執行函數。此函數用於存取這兩個元素並將 div 的文字變更為輸入欄位上的確切文字。

<html>
   <body>
      <h2 id="Access-an-i-Element-i-in-TypeScript">Access an <i>Element</i> in TypeScript</h2>
      <h4 id="Enter-your-text">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 元素，您可以使用文件物件及其各種方法（例如 getElementById、querySelector 和 querySelectorAll）來尋找要存取的元素，然後根據需要進行操作。

以上是存取類型腳本中的元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。