在TypeScript中使用getElementXXX()的示例代码

素描

Angular 1.x是用JavaScript编写的，我们经常在百度Angular中搜索AngularJS，这不是JavaScript的衍生版本，也不是Angular 1.x，在后续版本中，Angular框架改为用TypeScript重写。发生了很大的变化，所以有了区别。Angular v1.x称为AngularJS，v2及后续版本统称为Angular。

在搜索数据和解决方案时，我们经常会搜索大量的AngularJS内容，所以要注意区分。

在这里，我提一下Angular的历史，因为这篇文章是在使用这个框架的时候遇到的，所以我就重复几句。

问题来了

现在有以下html文件：

！-随机使用其中一个-input type=' text ' id=' info input ' name=' info input ' text area id=' info area ' name=' info area ' row=' 8 ' cols=' 80 '/text area！-从两个中选择一个使用-span id=' some '发生了一些事情！/spanp id='any '一切正常！/p我现在将通过TypeScript获取上面的任何DOM元素。我该怎么办？有JS基础的人都知道，操作DOM可以通过文档来完成：

//因为DOM元素的ID是唯一的，所以唯一的DOM元素DOM=document . getelementbyid(' info input ')就是这样得到的。//name属性不是唯一的，所以name=infoInput的所有DOM元素都是这样获取的，即一个数组dom1=document . getelementsbyname(' infoInput ')；这当然可以在TypeScript中完成，但是在使用它时，除了声明变量来保存获取的DOM元素之外，还有一个小问题。

//在angular frame中的init { ngoninit(){ let DOM=document . getelementbyid(' info area ')上导出类的一些实现；//1.获取输入框中的内容让html=dom.innerHTML让val=dom.value//2.打印出console . log(html)；console . log(val)；}}此代码将报告错误：

类型' html element '上不存在属性' value '也没关系，即使有错误提示，我们仍然可以运行并得到正确的结果。如果ts文件编译失败不想生成js文件，可以通过配置来实现。

什么是HTMLElement？这是一个包含所有HTML元素共有属性的对象。

有关HTMLElement和浏览器兼容性的详细信息，您可以查看这篇MDN文章

看一张图片：

图片来自nanaistaken的博客。

如果你恰好有一点面向对象编程的知识，那么这张图很容易理解。没有也没关系。毕竟js和ts都加入了class关键字，引入了class的思想。

通过上面的分析，我们可以知道getElementXXX()返回一个HTMLElement对象，它包含了所有DOM元素的公共属性。而且不同类别的每个DOM元素都有自己的特点，就是图中的一个子类。

Ts会做编译检查，所以会有错误提示，而js不会检查，这样会留下安全隐患。

到现在，我们应该已经明白了现在如何解决这种情况，以及以后如何使用getElementXXX函数。

修改后的代码：

在init { ngoninit(){///*上导出一些类实现。进行类型转换或进行类型断言让DOM=html inputelementdocument . getelementbyid(' info area ')；让dom1=document . getelementbyid(' infoArea ')作为HTMLElement//1.获取输入框中的内容让html=dom.innerHTML让val=dom.value//2.打印出console . log(html)；console . log(val)；}}摘要

HTMLElement是DOM节点的一个公共属性，它是从TypeScript库中提取的一个公共接口，类似于Java、c等其他面向对象语言，这样可以保证在操作DOM节点时不会出现访问不存在的属性的问题。

html inputrement是html inputrement的一个子接口(或者子类，但是TypeScript支持class，所以接口更好)，封装了Input、textarea等dom节点的属性。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。