2

如何将 a 转换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抛出一个错误。

4

3 回答 3

4

做到这一点的最好方法是将你的HTMLElement作为Node. 有两种方法可以做到这一点。首先是as语法。

let myNode = theHTMLElement as Node;

您也可以使用<>语法。

let myNode = <Node>theHTMLElement;

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

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

于 2020-12-22T21:01:46.053 回答
2

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

在lib.dom.d.ts（Angular 使用的类型定义库）内部，MutationObserver 对象的定义不太正确：

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

其中target被定义为Node元素。

HTMLElement在同一个文件中定义，它 extends Elementwhich extends Node. 所以HTMLElement应该没有任何问题适合目标属性。

更好的类型定义是：

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

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

于 2019-06-11T14:58:39.060 回答
1

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

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

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

还有另一种称为 DOM 解析器的方法。它在链接中进行了解释。希望能帮助到你。

于 2019-06-11T14:58:18.167 回答