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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
基于mysql的论坛(6)
2006/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php printf输出格式使用说明
2010/12/05 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
原生js轮播特效
2017/05/18 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
简单谈谈Python中的闭包
2016/11/30 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
写好自荐信的几个要点
2013/12/26 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
基层党员公开承诺书
2014/05/29 职场文书
农村党员一句话承诺
2014/05/30 职场文书
优秀教师单行材料
2014/12/16 职场文书
先进集体申报材料
2014/12/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年质检工作总结
2015/05/04 职场文书
班主任开场白
2015/06/01 职场文书
运动会运动员赞词
2015/07/22 职场文书
高二语文教学反思
2016/02/16 职场文书
四则混合运算教学反思
2016/02/23 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android