在 Deno 中使用 LinkeDOM

LinkeDOM 是一个类似 DOM 的命名空间，用于在 Deno 等没有实现 DOM 的环境中使用。

LinkeDOM 的重点是快速，并实现对服务器端渲染有用的功能。它可能允许你执行无效的 DOM 操作。 deno-dom 和 jsdom 则专注于正确性。虽然目前 deno-dom 在某些情况下比 LinkeDOM 慢，但两者都比 jsdom 快得多，所以如果你需要正确性或与服务器端渲染无关的功能，请考虑使用 deno-dom。

虽然 LinkeDOM 在 Deno CLI 下运行，但它没有类型检查。虽然提供的类型在使用 VSCode 等编辑器时效果很好，但尝试在运行时严格类型检查它们（就像 Deno 默认情况下所做的那样），它会失败。如果你使用 tsc 来类型检查代码，也会出现同样的情况。维护者表示他们对修复此问题不感兴趣。这意味着对于 Deno，你需要使用 --no-check=remote 来避免诊断程序停止你的程序执行。

LinkedDOM 与 deno_dom 一起在 Deno Deploy 下运行，但 jsdom 则不行。

基本示例

此示例将获取一个测试字符串，将其解析为 HTML，并根据它生成 DOM 结构。然后，它将查询该 DOM 结构，找出遇到的第一个标题，并打印出该标题的文本内容。

import { DOMParser } from "https://esm.sh/linkedom";
import { assert } from "https://deno.land/std@0.220.0/assert/mod.ts";

const document = new DOMParser().parseFromString(
  `<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Hello from Deno</title>
    </head>
    <body>
      <h1>Hello from Deno</h1>
      <form>
        <input name="user">
        <button>
          Submit
        </button>
      </form>
    </body>
  </html>`,
  "text/html",
);

assert(document);
const h1 = document.querySelector("h1");
assert(h1);

console.log(h1.textContent);

替代 API

对于 parseHTML() 可能更适合某些 SSR 工作负载。这类似于 jsdom 的 JSDOM() 函数，因为它为您提供了一个 window 范围的“沙箱”，您可以使用它来访问 document 范围之外的 API。例如

import { parseHTML } from "https://esm.sh/linkedom";

const { document, customElements, HTMLElement } = parseHTML(`<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Hello from Deno</title>
    </head>
    <body>
      <h1>Hello from Deno</h1>
      <form>
        <input name="user">
        <button>
          Submit
        </button>
      </form>
    </body>
  </html>`);

customElements.define(
  "custom-element",
  class extends HTMLElement {
    connectedCallback() {
      console.log("it works 🥳");
    }
  },
);

document.body.appendChild(document.createElement("custom-element"));

document.toString(); // the string of the document, ready to send to a client

在 Deno 中使用 LinkeDOM

基本示例​

替代 API​

基本示例

替代 API