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

存取類型腳本中的元素

PHPz

發布： 2023-08-24 18:45:02

轉載

1316 人瀏覽過

存取類型腳本中的元素

在 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>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>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>

登入後複製