TypeScript 访问一个HTML组件

在TypeScript中，要访问一个元素，或者我们可以说HTML组件，我们使用文档对象模型（DOM）。DOM定义了一个HTML和XML的编程接口，将文档的结构可视化为一个节点树。一个段落、一个按钮、一个div、一个标题等等，只是树中每个节点所代表的文档元素的几个例子。

TypeScript中的文档对象是通往DOM的大门。这意味着我们可以使用TypeScript轻松访问DOM中的元素。There are several ways to access elements, those are −

使用 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 “函数。这些函数分别改变元素的内部HTML文本和背景颜色。由于TypeScript代码不能在HTML中使用，我们需要先编译它，然后用HTML使用编译后的JavaScript代码。

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>