在 Type Script 中访问元素

typescriptjavascriptweb development

在 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");
//通过设置元素的 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>