Question

如何将HTMLElement转换为Node元素。

根据此答案（https://stackoverflow.com/a/9979779/639035）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

执行此操作的最佳方法是将您的 HTMLElement 转换为 Node。有两种方法可以做到这一点。第一个是 as 语法。

let myNode = theHTMLElement as Node;

您也可以使用 <> 语法。

let myNode = <Node>theHTMLElement;

注意：这会在编译 TypeScript 时改变类型，但不会神奇地为您提供 Node 的 JS 方法和属性。

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

Answer 2

您可以将HTML转换为字符串，然后使用以下方法转换字符串：

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

也许此链接会有所帮助：convert-html-stings-dom-nodes

还有另一种称为DOM解析器的方法。链接中对此进行了说明。希望对您有所帮助。

Answer 3

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即可，这会更好。

打字稿：将HTMLElement转换为Node

3 个答案: