视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
TypeScript中使用getElementXXX()的示例代码
2020-11-27 21:50:46 责编:小采
文档


HTMLElement是什么?这是一个对象,它包含了所有HTML元素公有的属性。

关于HTMLElement的详细内容以及浏览器的兼容,可以查看MDN的这篇文章

来看一张图:

图源自nanaistaken的博客。

如果你恰好有一点面向对象编程的知识,那么这张图就很容易理解,没有也没关系,毕竟无论是js还是ts,现在都增加了class关键字,引入了类的思想。

经过上面的分析,我们能够知道: getElementXXX() 返回的是一个HTMLElement对象,而这个对象包含了所有DOM元素的公有属性。而每种不同类别的DOM元素,又有自己的特性,也就是图中的子类。

ts会做编译检查,所以会有错误提示,而js则不检查,所以这也会留下安全隐患。

到这里,其实应该已经明白了现在这种情况该怎么解决以及以后该怎么使用getElementXXX函数了。

修改后的代码:

export class Some implements OnInit {
 ngOnInit() {
 // *. 做一次类型转换,或者做类型断言
 let dom = <HTMLInputElement>document.getElementById('infoArea');
 let dom1 = document.getElementById('infoArea') as HTMLElement;

 // 1. 获取输入框中的内容
 let html = dom.innerHTML;
 let val = dom.value;

 // 2. 打印
输出 console.log(html); console.log(val); } }

总结

HTMLElement是DOM结点共有的属性,TypeScript库中抽取该属性作为一个公共接口,类似于其他面向对象语言如Java和c++中所说的基类。这样做可以保证在操作DOM结点的时候不会出现访问不存在属性的问题。

HTMLInputElement是HTMLElement的一个子接口(或说子类,但TypeScript是支持class的,所以说接口更好一些),其内部封装了如input,textarea这类dom结点的属性。

下载本文
显示全文
专题