文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Manipulation TypeScript DOM操作实例代码分析

2023-07-05 09:13

关注

这篇文章主要介绍了Manipulation TypeScript DOM操作实例代码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Manipulation TypeScript DOM操作实例代码分析文章都会有所收获,下面我们一起来看看吧。

DOM Manipulation

对 HTMLElement 类型的探索

在标准化20年后,JavaScript 已经走过了很长的一段路。虽然 2020 年,JavaScript 可以在使用在服务端、数据科学甚至物联网设备,但最主要用在 web浏览器。

网站是由 HTML 和/或 XML 文档组成的。这些文档是静态的,不会改变。Document Object Model(DOM) 是浏览器实现的编程接口,目的是使静态网站有功能性。DOM API 能改变文档结构、样式、内容。API 功能非常强大,无数前端框架(jQurty,React,Angular 等)都是围绕着它开发的,目的是制作动态 网站,甚至更容易开发。

TypeScript 是 JavaScript 的类型化超集,并为 DOM API 定义了类型。这些 DOM 类型在任何默认的 TypeScript 项目都能轻易获得。在 lib.dom.d.ts 定义了20,000 行,其中 HTMLElement 类型是比较突出的,这个类型是 TypeSctipt 操作 DOM 的主干类型。

基础案例

一个简化的 index.html 文件

<!DOCTYPE html><html lang="en">  <head><title>TypeScript Dom Manipulation</title></head>  <body>    <div id="app"></div>    <!-- 假设 index.js 是 index.ts 编译输出的-->    <script src="index.js"></script>  </body></html>

用 TypeScript 添加 <p>Hello, World</p> 元素到 #app 元素。

// 1. 使用 id 属性选中某 div 元素const app = document.getElementById("app");// 2. 用编程方式创建新的 <p></p> 元素const p = document.createElement("p");// 3. 为新的 p 元素添加文本内容p.textContent = "Hello, World!";// 4. 把新的 p 元素附加到一开始获取的 div 元素app?.appendChild(p);

编译ts和运行 index.html 页面,结果 HTML 为:

<div id="app">  <p>Hello, World!</p></div>

Document 接口

上例中,TypeScript 第一行代码使用全局变量 document。检查该变量可以发现它是由 lib.dom.d.ts 文件中的 Document 接口定义的。而且包含对两个方法的调用,getElementByIdcreateElement

Document.getElementById

该方法定义如下:

getElementById(elementId: string): HTMLElement | null;

传递一个元素 id 字符串,并且返回 HTMLElementnull 其中一个。这个方法引用了最重要的类型之一 HTMLElement,是所有其他元素接口的基本接口。例如,getElementById 定义返回的类型是 HTMLElement,可是基础案例中,变量 p 的实际类型为 HTMLParagraphElement(说明 HTMLParagraphElementHTMLElemnt 的子类型 或 实现了 HTMLElement,具体可参考我另一篇文章中的 类之间的关系)。同时注意这方法可以返回 null,这是因为该方法在运行前不能确定它是否能够真正找到指定的元素。因为有可能为 null ,所以基础案例中最后一行代码使用了新运算符 可选链 去调用 appendChild 方法。

Document.createElement

这个方法的定义如下(省略了已弃用的定义,可到源码查看完整定义):

createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];createElement(tagName: string, options?: ElementCreationOptions): HTMLElement;

这是一个重载函数,第二个重载是最简单的,它的工作原理与 getElementById 方法非常相似。传递任意字符串并返回标准 HTMLElement 类型。这个定义使开发人员能够创建唯一的 HTML 元素标记。

例如 document.createElement('xyz') 返回 <xyz></xyz> 元素,显然不是 HTML 规范指定的元素。

如果你有兴趣,可以使用 document.getElementsByTagName 获取自定义元素

createElement 的第一个定义,使用了泛型模式。分解成几个部分更好理解,先从泛型表达式开始:<K extends keyof HTMLElementTagNameMap>。表达式定义了泛型参数 K ,它被约束为接口 HTMLElementTagElement 的键。HTMLElementTagElement 映射接口包含每个指定的 HTML 标签名及其对应的类型接口。例如,下面是前5个映射值:

interface HTMLElementTagNameMap {  "a": HTMLAnchorElement;  "abbr": HTMLElement;  "address": HTMLElement;  "applet": HTMLAppletElement;  "area": HTMLAreaElement;      ...}

有些元素没有独特的属性,所以它们只返回 HTMLElement,拥有独特属性和方法的类型返回它们特定的接口(将继承 HTMLElement 或 实现 HTMLElement

现在再看其它部分:(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]。第一个参数 tagName 被定义为泛型参数 K 。TypeScript 解释器可以从该参数的实参推断出泛型参数 K 类型。这意味着开发人员在使用这方法时不必指定泛型参数;并且可以在定义的其余部分中使用,如:返回值 HTMLElementTagNameMap[K] 使用 tagName 参数返回相应的类型。在基础案例中变量 p 调用该方法获得 HTMLParagraphElement 类型。如果代码是 document.createElement('a'),那么将获得 HTMLAnchorElement 类型。

Node 接口

document.getElementById 方法返回 HTMLElementHTMLElement 接口继承了 Element 接口,Element 接口继承了 Node 接口。这使得所有 HTML 元素可以使用 ElementNode 的方法。在基础案例中,我们使用一个定义在 Node 接口上的 appendChild 属性,把新的 p 元素附加到到网页。

Node.appendChild

现在再看基础案例中最后一行 app?.appendChild(p)。在上面 document.getElementById 部分已经讲解了 可选链 运算符使用在 app 元素,是因为 app 运行时可能为 null。而 appendChild 方法的定义为:

appendChild<T extends Node>(newChild: T): T;

这方法工作原理和 createElement 方法类似,泛型参数 T 来自对参数 newChild 实参的推断,并且 T 受到 Node 接口约束。

NodeList 接口 与 NodeListOf 接口

interface NodeList {    readonly length: number;    item(index: number): Node | null;    forEach(callbackfn: (value: Node, key: number, parent: NodeList) => void, thisArg?: any): void;    [index: number]: Node;}interface NodeListOf<TNode extends Node> extends NodeList {    item(index: number): TNode;    forEach(callbackfn: (value: TNode, key: number, parent: NodeListOf<TNode>) => void, thisArg?: any): void;    [index: number]: TNode;}

NodeList 接口只实现了以下属性和方法:lengthitem(index)forEach((value, key, parent) => void),和数值索引。而 NodeListOf 接口只是扩展了 NodeList 接口(可参考我另一篇文章:接口扩展),并且接收一个泛型 TNode,该泛型受到 Node 接口约束,并且把 NodeList 列表的元素 Node 类型,改为泛型 TNode 类型,类似于 Array<T> ,开发者传入指定泛型,就返回指定泛型的集合。

children 和 childNodes 的区别

在 DOM API 中,有子元素的概念。例如在以下 HTML 中,p 标签是 div 元素的子元素。

<div>  <p>Hello, World</p>  <p>TypeScript!</p></div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(2) [p, p]div.childNodes;// NodeList(2) [p, p]

捕获 div 元素后,children 属性将返回包含两个 HTMLParagraphElement (p 元素类型) 的 HTMLCollection 列表。而 childNodes 属性将返回 NodeList 列表,也是包含两个 HTMLParagraphElement,但是 NodeList 可以包含额外的 HTML 节点,HTMLCollection 列表不能。

例如,删除一个 p 标签,但是保留它的文本。

<div>  <p>Hello, World</p>  TypeScript!</div>;const div = document.getElementsByTagName("div")[0];div.children;// HTMLCollection(1) [p]div.childNodes;// NodeList(2) [p, text]

children 现在只包含 <p>Hello, World</p> 元素,而 childNodeschildren 多了一个 text 节点。text 是文字节点,包含文本 "TypeScript!"。children 列表没有包含这个文本节点,因为它是不 HTMLElement 类型。

querySelector 和 querySelectorAll 方法

这两个方法是获取符合独特约束条件的 dom 元素列表的工具。它们在 lib.dom.d.ts 中被定义为:

querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;querySelector<E extends Element = Element>(selectors: string): E | null;querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

querySelectorAll 的定义类似 getElementsById,只是它返回一个新类型: NodeListOf。这个返回类型本质上是标准 JavaScript 列表元素的自定义实现。可以说,用 Array<E> 替换 NodeListOf<E> 会产生非常相似的用户体验。NodeListOf 只实现了以下属性和方法:lengthitem(index)forEach((value, key, parent) => void),和数值索引。另外,这个方法返回元素列表,不是节点列表。

<ul>  <li>First :)</li>  <li>Second!</li>  <li>Third times a charm.</li></ul>;const first = document.querySelector("li"); // returns the first li elementconst all = document.querySelectorAll("li"); // returns the list of all li elements

泛型表达式 querySelectorAll<E extends Element = Element>,表示如果指定了泛型 E 的类型,并且是 Element 的子类型,那么 E 就是你指定的类型。如果没传指定泛型,那么泛型 E 默认就是 Element 类型。(注意!默认值也要受到 Element 接口的约束。)

例子:

type QuerySelectorAll<E extends number = 123> = (selectors: string) => Array<E>;// 指定泛型const Q1: QuerySelectorAll<456> = (str) => {  return [456]}// 无指定泛型const Q2: QuerySelectorAll= (str) => {  return [123]}

例子中,Q1 指定了泛型 E456456number 的子类型,符合约束,返回值为数组,元素为 456Q2 没指定泛型,所以 E123,因为默认值是 123,返回值为数组,元素为 123。默认值也要受到 number 的约束,例子中默认值为 123,是 number 的子类型,所以正确。例子中如果默认值为 string 或其它类型是不行的。

关于“Manipulation TypeScript DOM操作实例代码分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Manipulation TypeScript DOM操作实例代码分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯