访问类型脚本中的元素-js教程-PHP中文网

使用 getElementById() 方法

语法

示例

打字稿代码

HTML 代码

Access an Element in TypeScript

使用querySelector()方法

Enter your text:

输出

首页

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。

语法

1	`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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7360

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

什么是这个＆＃x27;在JavaScript？ Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前，这句话可