Typescript: конвертировать HTMLElement в узел

Question

Как я могу преобразовать HTMLElement в Node элемент.

Согласно этому ответу (https://stackoverflow.com/a/9979779/639035) a 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

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 2

Вы можете преобразовать HTML в строку, а затем преобразовать строку с помощью этого метода:

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

Может быть, эта ссылка поможет: convert-html-stings-dom-node

Существует также другой метод, называемый DOM parser. Это объясняется в ссылке. Надеюсь, это поможет.