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


Posted in Javascript onSeptember 12, 2019

简述

Angular 1.x版本是用JavaScript编写的,我们在百度Angular经常会搜索到AngularJS,并不是JavaScript的什么衍生版本,就是Angular 1.x。在后续版本中,改用TypeScript来重写了Angular框架。改动较大,所以做了个区分,Angular v1.x就叫AngularJS,v2及后续版本统称为Angular。

查资料和解决方案的时候,经常会搜索到大量的AngularJS内容,注意区分。

在这里提一下Angular的历史,是因为本文是在使用这个框架的时候遇到的,所以??铝骄洹?/p>

问题来了

现在有如下html文件:

<!-- 这俩随便挑一个用就行 -->
<input type="text" id="infoInput" name="infoInput">
<textarea id="infoArea" name="infoArea" rows="8" cols="80"></textarea>

<!-- 这俩也随便挑一个用就行 -->
<span id="some">something happen!</span>
<p id="any">anything ok!</p>

我现在要通过TypeScript获取上面任意一个DOM元素,怎么做?有JS基础都知道,操作DOM可以通过 document 完成:

// 由于DOM元素的ID是惟一的,所以这种方式获取的是唯一的DOM元素
dom = document.getElementById('infoInput');

// name属性是不唯一的,所以这种方式获取的是所有 name=infoInput 的DOM元素,即一个数组
dom1 = document.getElementsByName('infoInput');

而在TypeScript中当然也可以这么做,但是在具体使用的时候除了需要声明变量保存获取到的DOM元素之外,还有一点小小的问题。

// Angular框架中
export class Some implements OnInit {
 ngOnInit() {
  let dom = document.getElementById('infoArea');
  // 1. 获取输入框中的内容
  let html = dom.innerHTML;
  let val = dom.value;

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

这段代码写完会报一个错:

Property 'value' does not exist on type 'HTMLElement' 不要紧,即使有错误提示,我们依旧可以运行并得到正确的结果。如果想在ts文件编译失败时不生成js文件,可以通过配置实现。

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

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

来看一张图:

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

图源自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结点的属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js转化毫秒为时间格式代码
Apr 10 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
深入浅析vue中cross-env的使用
Sep 12 #Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 #Javascript
layer弹出层显示在top顶层的方法
Sep 11 #Javascript
layer.js之回调销毁对话框的例子
Sep 11 #Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 #Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 #Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 #Javascript
You might like
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue项目中引入Sass实例方法
2019/08/27 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python3.5绘制随机漫步图
2018/08/27 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
中学生自我评价范文
2014/02/08 职场文书
2014离婚协议书范文
2014/09/10 职场文书
开展警示教育活动总结
2015/05/09 职场文书