打字稿：将 HTMLElement 转换为节点

Question

如何将 HTMLElement 元素转换为 Node 元素。

根据这个答案 ( ) An element is one specific type of node...但是我找不到转换它们的方法。

我特别需要一个 Node 元素，将其传递给 MutationObserver (https://nitayneeman.com/posts/listening-to-dom-changes-using-mutationobserver-in-angular/ )，而 HTMLElement 会引发错误。

Answer 1

您可以将HTML转换成字符串，然后用这个方法转换字符串：

const stringHTML = '<div>One</div><div>Two</div>';
const fragment = document.createRange().createContextualFragment(stringHTML);
console.log(fragment);

也许这个 link 会有所帮助：convert-html-stings-dom-nodes

还有一个叫做DOM解析器的方法。在 link 中有解释。希望对你有帮助。

Answer 2

TypeScript 只为已经存在的对象提供类型定义，它不能修改对象的性质。所以，你的问题是关于 javascript 而不是打字稿。

在 lib.dom.d.ts（Angular 使用的类型定义库）中，MutationObserver 对象没有被正确定义：

interface MutationObserver {
    disconnect(): void;
    observe(target: Node, options: MutationObserverInit): void;
    takeRecords(): MutationRecord[];
}

其中 target 定义为 Node 元素。

HTMLElement 在同一个文件中定义，它扩展了 Element，扩展了 Node。所以 HTMLElement 应该没有任何问题可以放入目标属性.

更好的类型定义是：

observe<T extends Node>(target: T, options: MutationObserverInit): void;

但由于尚未提供此类型定义，因此最好告诉编译器在回调中传递 element as Node 就可以了。

Answer 3

最好的方法是将您的 HTMLElement 转换为 Node。有两种方法可以做到这一点。第一个是 as 语法。

let myNode = theHTMLElement as Node;

您也可以使用 <> 语法。

let myNode = <Node>theHTMLElement;

注意：这会在 TypeScript 编译时更改类型，但不会神奇地为您提供 Node.

它本质上允许你在你知道的时候绕过类型安全。如果类型不兼容，TypeScript 会尽力警告您，但如果您不小心，仍然会引入错误。

打字稿：将 HTMLElement 转换为节点

Typescript: Convert HTMLElement to Node

javascript

typescript

htmlelements