从TypeScript视角看HTML DOM（一）：前言

最新推荐文章于 2025-06-19 16:00:00 发布
最新推荐文章于 2025-06-19 16:00:00 发布
阅读量1.5k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端杂谈 从TypeScript视角看HTML DOM 文章标签： TypeScript HTML DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HermitSun/article/details/95780509
博客从信息隐藏观点出发，指出模块应暴露职责、隐藏实现，认识模块只需一份“契约”。以往JavaScript在契约实现上有欠缺，而TypeScript提供强类型和接口机制，带来从TypeScript视角更深刻认识HTML DOM的机会，还列举了相关内容目录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

按照信息隐藏的观点，一个模块应该暴露自己的职责，同时隐藏具体实现。

其实，我们认识一个模块，其实只需要一份“契约”而已：知道了供接口、需接口，和本身的“不变式”，这个模块的职责也就清楚了（模块的交互体现在供需接口里，作为参数出现）。

以往，JavaScript没有强类型，在契约的实现上有所欠缺；现在TypeScript提供了强类型和接口机制，正好给了我们一个更深刻（也更简单）的认识DOM的机会。

至于TypeScript实现的正确性……这只是一份契约而已。

目录

从TypeScript视角看HTML DOM（二）：Node与Element

从TypeScript视角看HTML DOM（三）：NodeList与HTMLCollection

从TypeScript视角看HTML DOM（四）：Event Flow

从TypeScript视角看HTML DOM（五）：Event

从TypeScript视角看HTML DOM（六）：Scripting

【网络安全】Trpc 视角下的现代 API 漏洞挖掘研究
等风来
03-18 2256
在这篇文章中，我将讨论我对 tRPC 的研究。首先，我们将回顾 tRPC 的概念，然后再分析 tRPC 应用的攻击面。作为开发者，我们需要在服务器上使用 TypeScript 定义 API，明确指定代表 API 端点的函数的输入和输出类型。在 tRPC 中，这些函数被称为“过程”（Procedures），它们可以执行各种操作，例如获取数据（查询，Queries）以及创建、删除和更新数据（变更，Mutations）。在服务器端，过程（Procedures）被组织到路由（Routers）中。
Typescript学习4 ( 内置对象 | DOM | BOM )
m0_74573297的博客
01-07 596
一、DCMA内置对象 let num:Number = new Number() let date: Date = new Date() let reg: RegExp = new RegExp('') let error: Error = new Error() let xhr:XMLHttpRequest = new XMLHttpRequest() 二、获取DOM 单个节点 1.HTML(元素名称)Element let div = document.querySelector('canvas') /
从TypeScript视角看HTML DOM（六）：Scripting
HermitSun的博客
07-15 1300
这一篇可能和TypeScript没太大关系。 看到TypeScript实现的script接口（去掉了deprecate的属性），除了我们平时经常用的几个属性之外，还可以添加监听，倒是让人耳目一新。 interface HTMLScriptElement extends HTMLElement { async: boolean; defer: boolean; src: ...
从TypeScript视角看HTML DOM（二）：Node与Element
HermitSun的博客
07-13 3868
要说DOM，绕不开的自然是结点（Node）的问题[1]。我们在实际使用的时候，应该都见过这种现象，对于同一段HTML，用children和childNodes获取到的内容不太一样。举一个从网上看到的例子: <html> <body> <h1>China</h1> <!-- My comment ... --> ...
Typescript学习系列---《DOM》
A_bad_horse的专栏
03-21 892
DOM (Document Object Model) 文档对象模型 DOM是所有浏览器都遵循的规范 一个网页就是一个DOM document. document.getElementById('xx'):返回一个对象 document.getElementsByTagName('li'):返回一组对象 document.querySelectorAl...
TypeScript的接口
DOM曼珠沙华的博客
08-03 240
TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述) 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型 接口: 是对象的状态(属性)和行为(方法)的抽象(描述) 接口类型的对象 多了或者少了属性是不允许的 可选属性: ? 只读属性: readonly (() => { interface IPers...
【愚公系列】《AIGC辅助软件开发》015-AI辅助前端编程：利用 ChatGPT 写代码
热门推荐
时光隧道
07-27 6万+
在数字化时代的浪潮中，前端开发面临着日益增长的挑战与机遇。随着用户对网站与应用体验的要求不断提高，开发者们需要更高效、更智能的工具来提升工作效率。近期，人工智能技术的迅猛发展为这一领域带来了新的变革，尤其是像 ChatGPT 这样的 AI 模型，成为了开发者的得力助手。本文将探讨如何利用 ChatGPT 来辅助前端编程，从代码生成到问题解决，我们将分享实际案例与技巧，帮助你在开发过程中事半功倍。无论你是前端开发的新手，还是经验丰富的工程师，相信这篇文章都能为你提供新的视角与灵感。
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》002-走进 Vue 3的新世界：前端技术演进
时光隧道
08-17 5万+
在当今飞速发展的前端技术领域，Vue.js 一直以其简洁易用、性能卓越而深受开发者喜爱。随着 Vue 3 的发布，它不仅在性能上有了显著提升，还引入了许多令人兴奋的新特性和改进，为前端开发带来了更多可能性。在这篇文章中，我们将深入探讨 Vue 3 的核心特性和技术演进，带你走进这个全新的前端世界。无论你是刚踏入前端领域的新手，还是经验丰富的开发者，这次技术之旅都将为你提供全新的视角和实用的技巧。准备好了吗？让我们一起开启这场探索之旅，看看 Vue 3 如何重新定义前端开发的未来！
告别React迷茫！让你从初级到架构师一站式进阶
最新发布
wylee的博客
06-19 1494
React开发者精选指南：awesome-react项目深度解析 这篇文章介绍了解决React生态选择困难的GitHub神器awesome-react，一份由全球社区维护的高质量资源集合。文章首先揭示了React开发者在技术选型中的常见痛点，随后深入分析了这个清单的六大核心价值： 解决"选择困难症"，直达最佳实践 显著提升开发效率 提供系统化学习路径 保持技术前沿性 避免重复造轮子 社区质量保证 文章详细解析了清单的结构内容，涵盖核心框架、状态管理、UI组件等20多个分类，并提供了Red
从TypeScript视角看HTML DOM（四）：Event Flow
HermitSun的博客
07-15 1340
说起DOM，除了HTML到DOM树结点的映射之外，最让人印象深刻的，大概也是最重要的，就是事件了。我们在浏览器中的操作，大多属于UI事件。我们先来看看W3C对UI事件的定义： This specification defines UI Events which extend the DOM Event objects defined in DOM. UI Events are those typ...
html之间怎么访问数据,离子问题 - 在typescript和html之间传递和访问数据
weixin_33902011的博客
06-04 139
我对Ionic和打字稿很新。我的文章中有以下实验功能代码。脚本：loadPaper(paper){let test = {'name': 'Person A', 'id': 1};console.log('TEST', test);console.log('paper', paper);this.navCtrl.push(this.loadPaperPage, {paper:paper, ques...
TypeScript与DOM操作：深入理解相关类型及实战示例
昔人'
05-12 593
TypeScript允许通过接口扩展来增强现有类型，这对于给DOM元素添加自定义属性非常有用。示例// 输出: Custom Value。
TypeScript Dom操作
Errol's Blog
05-06 8510
Typescript Dom操作
html文档type加 解析,模块解析 · TypeScript中文网 · TypeScript——JavaScript的超集
weixin_42437067的博客
06-03 345
这节假设你已经了解了模块的一些基本知识 请阅读模块文档了解更多信息。模块解析是指编译器在查找导入模块内容时所遵循的流程。假设有一个导入语句import { a } from "moduleA"; 为了去检查任何对a的使用，编译器需要准确的知道它表示什么，并且需要检查它的定义moduleA。这时候，编译器会有个疑问“moduleA的结构是怎样的？” 这听上去很简单，但moduleA可能在你写的某个....
TypeScript接口
ML.G的博客
06-06 188
1.接口的定义 在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到了限制和规范作用。接口定义了某些类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里面的方法实现细节，它只规定这些类里必须提供某些方法，提供这些方法的类可以满足实际需要。typescript中的接口类似于Java，同时还增加了跟灵活的接口类型，包括属性、函数、可索引和类等。 2.接口类型 属性类接口 函数类型接口 可索引接口 类类型接口 接口的继承 3.示例 3.1属性类接口 定义
TypeScript DOM类型的声明
aGreetSmile的博客
09-05 612
【代码】TypeScript DOM类型的声明。
TypeScript常见类型错误 | 类型EventTarget上不存在属性 - ts中的dom类型
好好学习天天向上
09-28 4464
事件,包含了事件的基本信息,如事件类型、目标元素等。可以使用该接口来定义事件的类型。在TypeScript中，使用事件回调函数的参数。更具体的dom元素类型基本都继承。，并对其进行了扩充。，可以将其进行更具体化的约束。xxx不存在xx类型。
Linux_UNIX编程手册-读书笔记-第四章（文件I/O：通用的I/O模型）
weixin_43133795的博客
12-11 239
4.1 概述 所有执行I/O操作的系统调用都以文件描述符，一个非负数（通常是最小整数），来指代打开的文件。 针对每个进程，文件描述符都自成一套 应该就是每个进程相互之间文件描述符不冲突 在程序开始运行之前，shell代表程序打开这三个文件描述符：stdin,stdout,stderr. 这三个文件描述符默认指向shell运行所在终端。 四个主要的I/O系统调用： fd = open(pat...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值