如果只是看解法，可以直接跳到第二节。Angular1.x版本是用JavaScript编写的。我们经常在百度Angular中搜索AngularJS，而不是JavaScript。衍生版本是Angular1.x。在后续版本中，Angular框架被重写为使用TypeScript。变化较大，故作区分。Angularv1.x称为AngularJS，v2及后续版本统称为Angular。在查找资料和解决方案的时候，经常会找到很多AngularJS的内容，所以要注意区分。这里提到Angular的历史，是因为这篇文章是在使用这个框架的时候遇到的，所以啰嗦几句。问题来了。现在有以下html文件：有些事情发生了！anythingok!
现在我想通过TypeScript获取上面任意一个DOM元素，怎么办？有JS基础的都知道，可以通过document来操作DOM：//由于DOM元素的ID是唯一的，所以该方法获取唯一的DOM元素dom=document.getElementById('infoInput');//name属性它不唯一，所以该方法获取的是所有name=infoInput的DOM元素，即一个数组dom1=document.getElementsByName('infoInput');当然在TypeScript中也可以做到这一点，但是在具体使用中除了需要声明变量来保存获取到的DOM元素之外，还有一点问题。//导出类Angular框架中的一些实现OnInit{ngOnInit(){letdom=document.getElementById('infoArea');//1.获取输入框中的内容lethtml=dom.innerHTML;让val=dom.value;//2.打印出console.log(html);控制台日志（val）；}}写完这段代码会报错：Property'value'doesnotexistontype'HTMLElement'没关系，即使有错误提示，我们仍然可以运行并得到正确的结果。如果不想在ts文件编译失败的时候生成js文件，可以配置一下。什么是HTML元素？这是一个包含所有HTML元素共有的属性的对象。关于HTMLElement和浏览器兼容性的详细介绍，可以查看MDN上的这篇文章看一张图片：图片来自naaitaken的博客。如果你恰好有一点面向对象编程的知识，那么这张图就很容易看懂，没有也没关系。毕竟现在的js和ts都加上了class关键字，引入了一个类的思想。经过上面的分析，我们可以知道：getElementXXX()返回的是一个HTMLElement对象，这个对象包含了所有DOM元素的公共属性。而每一种DOM元素都有自己的特点，就是图中的子类。ts会做编译检查，所以会有错误提示，而js不会检查，这样也会留下安全隐患。至此，你应该已经明白了现在如何解决这种情况，以及以后如何使用getElementXXX函数。修改后的代码：exportclassSomeimplementsOnInit{ngOnInit(){//*.做一个类型转换，或者做一个类型断言letdom=
document.getElementById('infoArea');让dom1=document.getElementById('infoArea')作为HTMLElement；//1.获取输入框中的内容lethtml=dom.innerHTML;让val=dom.value;//2.打印出console.log(html);控制台.log(val);}}总结HTMLElement是DOM节点的一个公共属性，TypeScript库将这个属性抽取出来作为一个公共接口，类似于Java、C++等其他面向对象语言中的基类。这样做可以保证在操作DOM节点时不会出现访问不存在的属性的问题。HTMLInputElement是HTMLElement的子接口（或者说子类，但是TypeScript支持class，所以接口更好），内部封装了dom节点的input、textarea等属性。
