在 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 innerhtmlmydiv.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>
输出请注意，getelementsbyclassname、getelementsbytagname 和 getelementsbyname 方法也允许您访问元素，但它们返回元素集合而不是单个元素。
要在 typescript 中访问 html 元素，您可以使用文档对象及其各种方法（例如 getelementbyid、queryselector 和 queryselectorall）来查找要访问的元素，然后根据需要对其进行操作。
以上就是访问类型脚本中的元素的详细内容。