Manipulation-TypeScript DOM操作示例解析

目录
  • DOM Manipulation
    • 对 HTMLElement 类型的探索
    • 基础案例
  • Document 接口
    • Document.getElementById
    • Document.createElement
  • Node 接口
    • Node.appendChild
    • NodeList 接口 与 NodeListOf 接口
    • children 和 childNodes 的区别
    • querySelector 和 querySelectorAll 方法

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 的主干类型。

源码地址 lib.dom.d.ts

基础案例

一个简化的 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 接口定义的。而且包含对两个方法的调用，getElementById 和 createElement。

Document.getElementById

该方法定义如下:

getElementById(elementId: string): HTMLElement | null;

传递一个元素 id 字符串，并且返回 HTMLElement 或 null 其中一个。这个方法引用了最重要的类型之一 HTMLElement，是所有其他元素接口的基本接口。例如，getElementById 定义返回的类型是 HTMLElement，可是基础案例中，变量 p 的实际类型为 HTMLParagraphElement（说明 HTMLParagraphElement 是 HTMLElemnt 的子类型 或 实现了 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 方法返回 HTMLElement。HTMLElement 接口继承了 Element 接口，Element 接口继承了 Node 接口。这使得所有 HTML 元素可以使用 Element 与 Node 的方法。在基础案例中，我们使用一个定义在 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 接口只实现了以下属性和方法：length，item(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> 元素，而 childNodes 比 children 多了一个 text 节点。text 是文字节点，包含文本 "TypeScript!"。children 列表没有包含这个文本节点，因为它是不 HTMLElement 类型。

querySelector 和 querySelectorAll 方法

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

/**
 * Returns the first element that is a descendant of node that matches selectors.
 */
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;
/**
 * Returns all element descendants of node that match selectors.
 */
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 只实现了以下属性和方法：length，item(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 element
const 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 指定了泛型 E 为 456，456 为 number 的子类型，符合约束，返回值为数组，元素为 456。Q2 没指定泛型，所以 E 为 123，因为默认值是 123，返回值为数组，元素为 123。默认值也要受到 number 的约束，例子中默认值为 123，是 number 的子类型，所以正确。例子中如果默认值为 string 或其它类型是不行的。

参考资料链接 www.typescriptlang.org/docs/handbo…

以上就是DOM Manipulation-TypeScript DOM操作示例解析的详细内容，更多关于Manipulation TypeScript DOM的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • TypeScript 类型级别示例介绍

    介绍 这是一门在线课程,旨在将您的TypeScript技能从中级提升到高级.它将使你深入了解类型系统的基本原理,并指导你完成其高级功能.在这里,你会找到成为TypeScript专家所需的一切-不仅有深入的内容,还有练习新技能的有趣挑战,就像这里的这个. /** * Try assigning "World" to `type Hello`! */ type Hello = "..."; // Type-level unit tests! // If the next

  • TypeScript十大排序算法插入排序实现示例详解

    目录 一. 插入排序的定义 二. 插入排序的流程 三. 插入排序的图解 四. 插入排序的代码 五. 插入排序的时间复杂度 六. 插入排序的总结 一. 插入排序的定义 插入排序就像是你打扑克牌,你从牌堆顶取一张牌,找到合适的位置插入到已有牌的顺序中,并不断重复这一步骤直到所有的牌都被 插入到合适的位置,最终使得整副牌有序. 与打牌类似,插入排序(Insertion sort)的实现方法是: 首先假设第一个数据是已经排好序的,接着取出下一个数据,在已经排好序的数据中从后往前扫描,找到比它小的数的位置

  • TypeScript实现十大排序算法之冒泡排序示例详解

    目录 一. 冒泡排序的定义 二. 冒泡排序的流程 三. 冒泡排序的图解 四. 冒泡排序的代码 五. 冒泡排序的时间复杂度 六. 冒泡排序的总结 一. 冒泡排序的定义 冒泡排序是一种简单的排序方法. 基本思路是通过两两比较相邻的元素并交换它们的位置,从而使整个序列按照顺序排列. 该算法一趟排序后,最大值总是会移到数组最后面,那么接下来就不用再考虑这个最大值. 一直重复这样的操作,最终就可以得到排序完成的数组. 这种算法是稳定的,即相等元素的相对位置不会发生变化. 而且在最坏情况下,时间复杂度为O(

  • TypeScript类型级别和值级别示例详解

    目录 对值级别编程类型级别编程区分 类型级编程 挑战是如何工作的 挑战 对值级别编程类型级别编程区分 首先,让我们对值级别编程和类型级别编程进行重要区分. 值级别编程让我们编写将在生产中运行的代码即运行期,并为我们的用户提供有用的东西. 类型级别编程帮助我们确保代码在发布之前即编译期不包含错误,在运行期会被完全删除 JavaScript没有类型,所以所有JavaScript都是值级别的代码: // A simple Javascript function: function sum(a, b)

  • Manipulation-TypeScript DOM操作示例解析

    目录 DOM Manipulation 对 HTMLElement 类型的探索 基础案例 Document 接口 Document.getElementById Document.createElement Node 接口 Node.appendChild NodeList 接口 与 NodeListOf 接口 children 和 childNodes 的区别 querySelector 和 querySelectorAll 方法 DOM Manipulation 对 HTMLElement

  • PHP文件打开关闭及读写操作示例解析

    前言 PHP支持文件上传功能,因此学习PHP文件的相关操作是必须的,这篇笔记会去记录PHP文件系统的相关知识. 文件打开与关闭 文件处理包括读取.关闭.重写等,例如,访问一个文件需要3步:打开文件.读写文件和关闭文件.其他的操作要么是包含在读写文件中(如显示内容.写入内容等),要么与文件自身的属性有关系(如文件遍历.文件改名等). 1.打开文件 在PHP中使用fopen()函数打开文件,fopen()函数的语法如下: resource fopen ( string filename, strin

  • java理论基础Stream API终端操作示例解析

    java理论基础Stream API终端操作示例解析

    目录 一.JavaStream管道数据处理操作 二.ForEach和ForEachOrdered 三.元素的收集collect 3.1.收集为Set 3.2.收集到List 3.3.通用的收集方式 3.4.收集到Array 3.5.收集到Map 3.6.分组收集groupingBy 四.其他常用方法 一.Java Stream管道数据处理操作 在本号之前写过的文章中,曾经给大家介绍过 Java Stream管道流是用于简化集合类元素处理的java API.在使用的过程中分为三个阶段.在开始本文之

  • C++常见的stl容器与相关操作 示例解析

    目录 sort排序 vector map unordered_map set queue stack 创建容器时指定排序规则 sort排序 针对含有迭代器的容器,可以用#include<algorithm>中的sort函数进行排序. 默认排序是从小到大,可以自己写仿函数,也可以用greater<int>()或者less<int>(). #include <vector> #include <algorithm> #include <iost

  • PHP使用DOM对XML解析处理操作示例

    本文实例讲述了PHP使用DOM对XML解析处理操作.分享给大家供大家参考,具体如下: DOM(Document Object Model):文档对象模型.核心思想是:把 xml文件看作是一个对象模型,然后通过对象的方式来操作 xml 文件. xml本身有许多节点:     元素节点     文本节点     属性节点     注释节点     CDATA节点     文档节点 php对xml文档进行增删改查(CURD)操作,具体分析如下: xml文档:class.xml <?xml versio

  • Python基于dom操作xml数据的方法示例

    Python基于dom操作xml数据的方法示例

    本文实例讲述了Python基于dom操作xml数据的方法.分享给大家供大家参考,具体如下: 1.xml的内容为del.xml,如下 <?xml version="1.0" encoding="utf-8"?> <catalog> <maxid>4</maxid> <login username="pytest" passwd='123456'> <caption>Python

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • Go操作redis与redigo的示例解析

    目录 Go-操作redis 安装 连接 使用 设置key过期时间 批量获取mget.批量设置mset 列表操作 hash操作 Pipelining(管道) redis发布会订阅模式 事务操作 万能操作 连接redis 写入 读取 全部代码 Go-操作redis 安装 golang操作redis的客户端包有多个比如redigo.go-redis,github上Star最多的莫属redigo. github地址:https://github.com/garyburd/redigo 目前已经迁移到:h

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • JavaScript基于DOM操作实现简单的数学运算功能示例

    本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

随机推荐