手机版

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

时间:2021-08-20 来源:互联网 编辑:宝哥软件园 浏览:

素描

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节点的属性。

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

版权声明:在TypeScript中使用getElementXXX()的示例代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。