本页内容

使用 LinkeDOM 与 Deno

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 Deploy 下运行，以及 deno_dom，但 jsdom 不运行。

基本示例 跳转到标题

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

import { DOMParser } from "https://esm.sh/linkedom";
import { assert } from "https://deno.land/[email protected]/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