我要评论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的资料请关注代码网其它相关文章！
发表评论